En este artículo, me gustaría compartir mi experiencia en la división de paquetes para un sitio de varias páginas usando Webpack 4. Primero, cree un punto de entrada para cada página. Considere 4 páginas como ejemplo:
const path = require("path"); const PATHS = { src: path.resolve(process.cwd(), "src"), dist: path.resolve(process.cwd(), "dist") }; module.exports = { entry: { common: `${PATHS.src}/js/common`, index: `${PATHS.src}/js/index`, contacts: `${PATHS.src}/js/contacts`, about: `${PATHS.src}/js/about`, } }
Durante el ensamblaje, se creará un paquete para cada página. En common punto de entrada common , publico scripts comunes para todas las páginas. Para conectar nuestros paquetes a páginas, utilizaremos el complemento Webpack HtmlWebpackPlugin .
Considere un ejemplo:
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... };
En chunks especificamos los paquetes necesarios para esta página (orden: de derecha a izquierda). Por lo tanto, los primeros guiones se conectarán a la página y luego los guiones necesarios por separado para esta página.
Si tenemos módulos comunes / bibliotecas de terceros conectados en diferentes páginas, crearemos paquetes comunes para estas páginas.
Utilizaremos el complemento Webpack SplitChunksPlugin . En realidad, aquí está la configuración:
module.exports = { optimization: { splitChunks: { chunks: "all", minSize: 1, minChunks: 2 } } }
Después del ensamblaje, recibiremos paquetes por separado para cada página y paquetes que compartan nuestras páginas.
index.js contacts.js common.js about.js vendors~about-us~index.js vendors~about-us~contacts.js
El paquete de proveedores ~ about-us ~ index.js contendrá scripts comunes para about-us e index , que el navegador almacena en caché, y cuando cambia de la página de index a about el navegador los descargará y solo necesita descargar el paquete about.js .
Los nombres de los fragmentos se pueden cambiar en la configuración de este complemento.
Para conectar estos paquetes correctamente a cada una de nuestras páginas, utilizaremos HtmlWebpackPlugin. La configuración es la misma que al principio del artículo. Solo que ahora tiene que poner la versión alfa de este complemento, porque al momento de escribir este complemento no conectaba nuestros fragmentos separados, sino solo puntos de entrada conectados.
npm i --save-dev html-webpack-plugin@next
Después del ensamblaje, obtenemos el siguiente código en index.html:
<script src="js/common.js"></script> <script src="js/vendors~about-us~index.js"></script> <script src="js/index.js"></script>