Cada día tenemos más ficheros de JavaScript en nuestras aplicaciones. Frameworks como Angular.js han ayudado a modularizar el código y organizarlo. Esto es un avance, sin embargo nos encontramos con nuevos problemas. Uno de los problemas más importantes que tenemos hoy en día con este tipo de aplicaciones es la fragmentación de los ficheros de JavaScript y la carga de estos por parte del Navegador. Webpack es una herramienta que puede ayudarnos a empaquetar nuestro código.
Vamos a partir de tres ficheros de JavaScript independientes f1.js, f2.js y f3.js, cada uno contiene una función:
var f1= function(){
console.log("hola1");
}
var f2=function(){
console.log("hola2");
}
var f3= function(){
console.log("hola3");
}
Los cargamos en una página HTML de la forma habitual:
<html>
<head>
</head>
<body>
</body>
</html>
Ejecutamos:
Es momento de instalar Webpack y enfocar de otra forma, para ello necesitaremos usar npm:
npm -g install webpack
El siguiente paso es modificar nuestros ficheros para que cumplan la especificación de Commons.js soportada por Webpack.
module.exports= {
f1: function(){
console.log("hola1");
}
}
module.exports= {
f2: function(){
console.log("hola2");
}
}
module.exports= {
f3: function(){
console.log("hola3");
}
}
Una vez realizados los cambios creamos un nuevo fichero "app.js" que importe a los demás apoyándonos en CommonsJS:
var modulo1=require("./f1.js");
modulo1.f1();
var modulo2=require("./f2.js");
modulo2.f2();
var modulo3=require("./f3.js");
modulo3.f3();
Es el momento de crear el fichero de configuración de Webpack (webpack.config.js) que se encargará de definir como empaquetamos todo.
module.exports= {
entry:["./app.js","./f1.js","./f2.js","./f3.js"],
output:{
filename:"resultado.js"
}
}
Ejecutamos Webpack desde la consola:
webpack
La herramienta procesa los ficheros y genera el nuevo fichero de resultado:
Este fichero contendrá toda la funcionalidad.
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
__webpack_require__(1);
__webpack_require__(2);
__webpack_require__(3);
module.exports = __webpack_require__(4);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var modulo1=__webpack_require__(2);
modulo1.f1();
var modulo2=__webpack_require__(3);
modulo2.f2();
var modulo3=__webpack_require__(4);
modulo3.f3();
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports= {
f1: function(){
console.log("hola1");
}
}
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports= {
f2: function(){
console.log("hola222");
}
}
/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports= {
f3: function(){
console.log("hola3");
}
}
/***/ }
/******/ ]);
Es momento de cambiar el código de nuestra página y quedarnos con una única referencia:
<html>
<head>
</head>
<body>
</body>
</html>
El resultado será idéntico y hemos conseguido empaquetarlo todo:
Webpack soporta un amplio conjunto de opciones que ayudan a automatizar todo este proceso.
Ver todos los comentarios en https://www.genbeta.com
VER 0 Comentario