Empaquetando JavaScript con Webpack

Día a día tenemos más archivos de JavaScript en nuestras aplicaciones. Frameworks como Angular.js han ayudado a modularizar el código y organizarlo. Esto es un avance, no obstante nos hallamos con nuevos inconvenientes. Entre los inconvenientes más esenciales que tenemos en la actualidad con esta clase de aplicaciones es la fragmentación de los archivos de JavaScript y la carga de estos por la parte del Navegador. Webpack es una herramienta que puede asistirnos a empaquetar nuestro código. Partiremos de 3 archivos de JavaScript independientes f1.js, f2.js y f3.js, cada uno de ellos contiene una función: var f1= function()undefined var f2=function()undefined var f3= function()undefined Los cargamos en una página HTML de la manera habitual: f1(); f2(); f3(); Ejecutamos: Es instante de instalar Webpack y enfocar de otra manera, para esto necesitaremos emplear npm: npm -g install webpack El próximo paso es alterar nuestros archivos a fin de que cumplan la especificación de Commons.js soportada por Webpack. module.exports= undefined module.exports= undefined module.exports= undefined Una vez efectuados los cambios creamos un nuevo archivo aplicación.js que importe a el resto 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 instante de crear el archivo de configuración de Webpack (webpack.config.js) que se ocupará de acotar como empaquetamos todo. module.exports= undefined Ejecutamos Webpack desde la consola: webpack La herramienta procesa los archivos y produce el nuevo archivo de resultado: Este archivo contendrá toda la funcionalidad. /******/ (function(modules) undefined) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) undefined, /* 1 */ /***/ function(module, exports, __webpack_require__) undefined, /* dos */ /***/ function(module, exports) undefined, /* tres */ /***/ function(module, exports) undefined, /* cuatro */ /***/ function(module, exports) undefined /******/ ]); Es instante de mudar el código de nuestra página y quedarnos con una única referencia: El desenlace va a ser idéntico y hemos logrado empaquetarlo todo: Webpack aguanta un extenso conjunto de opciones que asisten a mecanizar todo este proceso. SyntaxHighlighter.all(); Asimismo te invitamos a Utilizando Log4Javascript API First: el vínculo de unión entre la página web y el móvil Polymer 1.0 – La nueva Empaquetando JavaScript con Webpack fue publicada originalmente en turincon.net por C. Á. .