在本文中，我想分享我使用Webpack 4为多页面站点拆分捆绑包的经验。首先，为每个页面创建一个入口点。 以4页为例：
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`, } }
在组装期间，将为每个页面创建一个包。 在common入口点，我为所有页面发布了公共脚本。 要将包绑定到页面，我们使用Webpack插件HtmlWebpackPlugin 。
考虑一个例子：
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... };
chunks以chunks指定此页面所需的捆绑包（顺序：从右到左）。 因此，第一个脚本将连接到该页面，然后该页面分别需要这些脚本。
如果我们在不同页面上连接了公共模块/第三方库，则将为这些页面创建公共捆绑包。
我们将使用Webpack插件SplitChunksPlugin 。 实际上，这是配置：
module.exports = { optimization: { splitChunks: { chunks: "all", minSize: 1, minChunks: 2 } } }
组装后，我们将分别为每个页面和共享我们页面的捆绑包接收捆绑包。
index.js contacts.js common.js about.js vendors~about-us~index.js vendors~about-us~contacts.js
供应商的about_us〜index.js捆绑包将包含about-us和index通用脚本，这些脚本由浏览器缓存，并且当您从index页面切换到about它们将由浏览器下载，您只需要下载about.js捆绑包。
块名称可以在此插件的配置中更改。
为了将这些捆绑包正确连接到我们的每个页面，我们将使用HtmlWebpackPlugin。 配置与本文开头的配置相同。 只是现在，您必须放置此插件的alpha版本，因为在编写本文时，此插件没有连接我们分开的块，而仅连接了入口点。
npm i --save-dev html-webpack-plugin@next
组装后，我们在index.html中获得以下代码：
<script src="js/common.js"></script> <script src="js/vendors~about-us~index.js"></script> <script src="js/index.js"></script>