¿Qué es Webpack?
Webpack es un poderoso paquete de módulos. Un bundle es un archivo JavaScript que incorpora activos que van juntos y que deben ser servidos al cliente en respuesta a una solicitud de un solo archivo. Un bundle puede incluir JavaScript, CSS, HTML, y casi cualquier otro lenguaje.
El Webpack se desplaza por el código fuente de tu aplicación, buscando declaraciones de importación, construyendo un gráfico de dependencia y emitiendo uno (o más) paquetes. Con los «cargadores» de plugins, Webpack puede preprocesar y minificar diferentes archivos no JavaScript como los archivos TypeScript, SASS y LESS.
En package.json, hemos añadido los paquetes «webpack» como «devdependencias». Realizarán todo el trabajo de empaquetado.
webpack.config.js define lo que hace Webpack. Como siempre, las aplicaciones se ejecutan en el entorno de Desarrollo , Prueba y Producción .
Hay algunas funcionalidades comunes y otras específicas de los entornos. Nos centraremos en el entorno de desarrollo y producción.
El entorno de desarrollo debe tener mapas de origen para depurar los archivos de tipoScript. Sin embargo, no es necesario minar los paquetes de JS, CSS, etc. El entorno de producción debe minar los paquetes para reducir el tiempo de carga. Webpack 2 también hace «tree shake», un método para eliminar el código no usado para reducir el tamaño de los paquetes.
webpack.config.js – Basado en el conjunto del entorno process.env.NODE_ENV, ejecuta configuraciones dev o prod.
Webpack.common.js antes de agrupar los archivos específicos del entorno, realiza tareas destinadas a ser utilizadas para ambos entornos.
Webpack divide las aplicaciones de Angular 2 en 3 archivos: polyfills (para mantener la compatibilidad con navegadores antiguos), vendors (todos los JS, CSS, HTML, SCSS, imágenes, JSON etc. en un solo archivo) y boot (archivos específicos de la aplicación). Esta división se resuelve en base a varias extensiones de archivo cuando Webpack por sí mismo no sabe qué hacer con un archivo que no sea de JavaScript.
Le enseñamos a procesar esos archivos en JavaScript usando cargadores. Para ello, hemos escrito cargadores para TS, HTML, JSON, fuentes, imágenes y más. Cualquier activo estático colocado en clientsrc/assets será copiado a la carpeta de activos usando CopyWebpackPlugin. CleanWebpackPlugin limpia la carpeta wwwroot/dist cada vez que lo ejecutamos, para que tengamos un conjunto de archivos nuevos.
Te dije arriba que borraras el archivo index.html, ahora los clientesrc/index.html serán movidos a wwwroot usando HtmlWebpackPlugin. Además Webpack inyecta los archivos de paquete, es decir, los archivos polyfills, vendor, boot JS y los incluye en la referencia del script HTML.Ahora veamos webpack.dev.js con fines de desarrollo
Ejecutando webpack-dev-server – esto ejecuta toda la aplicación en memoria. Cualquier cambio en el archivo fuente se aplica inmediatamente. Carga la aplicación en modo de depuración con el mapa de fuentes. Ejecuta la aplicación en el puerto localhost 3000. (El puerto puede ser cambiado según su conveniencia.)
Ahora echemos un vistazo a lo que hace webpack.prod.js:
- Fusiona todos los archivos y copias de los paquetes en wwwroot.
- Minimiza todos los archivos para cargarlos más rápido usando UglifyJsPlugin.
Esperemos que esto aclare algunas de las funcionalidades de Webpack.