Neste artigo, gostaria de compartilhar minha experiência na divisão de pacotes para um site de várias páginas usando o Webpack 4. Primeiro, crie um ponto de entrada para cada página. Considere 4 páginas como um exemplo:
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 a montagem, um pacote será criado para cada página. No ponto de entrada common , coloquei scripts comuns para todas as páginas. Para conectar nossos pacotes configuráveis às páginas, usamos o plug-in Webpack HtmlWebpackPlugin .
Considere um exemplo:
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... };
Nos chunks especificamos os pacotes necessários para esta página (ordem: da direita para a esquerda). Assim, os primeiros scripts serão conectados à página e, em seguida, os scripts necessários separadamente para esta página.
Se tivermos módulos / bibliotecas de terceiros comuns conectados em páginas diferentes, criaremos pacotes comuns para essas páginas.
Usaremos o plug-in Webpack SplitChunksPlugin . Na verdade, aqui está a configuração:
module.exports = { optimization: { splitChunks: { chunks: "all", minSize: 1, minChunks: 2 } } }
Após a montagem, receberemos pacotes separadamente para cada página e pacotes que compartilham nossas páginas.
index.js contacts.js common.js about.js vendors~about-us~index.js vendors~about-us~contacts.js
O pacote vendors ~ about-us ~ index.js conterá scripts comuns para about-us e index , que são armazenados em cache pelo navegador e, quando você alterna da página de index para about eles já serão baixados pelo navegador e você só precisará baixar o pacote about.js .
Os nomes dos fragmentos podem ser alterados na configuração deste plugin.
Para conectar esses pacotes configuráveis corretamente a cada uma de nossas páginas, usaremos o HtmlWebpackPlugin. A configuração é a mesma do começo do artigo. Só agora você deve colocar a versão alfa deste plug-in, porque no momento da redação, esse plug-in não conectava nossos pedaços separados, mas apenas pontos de entrada.
npm i --save-dev html-webpack-plugin@next
Após a montagem, obtemos o seguinte código em index.html:
<script src="js/common.js"></script> <script src="js/vendors~about-us~index.js"></script> <script src="js/index.js"></script>