Webpack 是目前前端领域中最流行的打包工具之一，它能帮助开发者将多个文件打包成一个或多个 bundle，从而提高网站的性能。但是，Webpack 可以被用于单页面应用，也可以被用于多页面应用。在本文中，我们将深入讨论如何管理多页面应用的 Webpack 配置。
多页面应用和单页面应用有何不同？
在一个单页面应用中，所有的路由和状态管理都是通过前端框架来完成的。这意味着，只需要一个根页面和少量的路由切换，就能够实现所有的页面交互。而在一个多页面应用中，每个页面都是独立的，它们都有自己的 HTML、CSS 和 JavaScript 文件。这些文件需要被打包成单个文件，然后在页面间进行切换。
如何为多页面应用配置 Webpack？
要为多页面应用配置 Webpack，首先需要了解 Webpack 的工作流程。Webpack 的默认配置文件是 webpack.config.js，在这个文件中，开发者可以配置入口和出口等属性，以便将多个文件打包成一个或多个 bundle。在多页面应用中，我们需要为每个页面创建一个入口文件，并将它们打包成单独的文件。
以下是一个基本的 Webpack 多页面应用配置示例：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- -------------- - - ------ - ------ ----------------- ------ ----------------- -------- ------------------ -- ------- - --------- -------------------------- ----- ----------------------- ------- -- -------- - --- ------------------- ------ ------ ------ --------- ------------- ------- --------- --- --- ------------------- ------ ------ ---- --------- ------------- ------- --------- --- --- ------------------- ------ -------- ---- --------- --------------- ------- ----------- -- - --展开代码
在这个示例中，我们定义了三个入口文件：index.js、about.js 和 contact.js。我们设置了一个编译输出文件夹 dist，并定义了一个 [name].[contenthash].js 的输出文件名格式。这个格式是为了保证“缓存失效”的机制，即当文件内容发生变化时，文件名也要跟着变化，从而让浏览器重新请求对应的文件，而不是使用缓存的版本。
我们还使用了一个插件 HtmlWebpackPlugin，它可以根据我们创建的每个入口文件，自动创建对应的 HTML 文件，并且在 HTML 中引入正确的 JavaScript 文件。我们在插件的配置中，分别定义了每个 HTML 文件的标题、文件名和所需要的 chunks。
除了上述配置，还可以使用多个插件进行优化。
如何优化多页面应用的 Webpack 配置？
在多页面应用中，我们可以使用以下优化技术：
1. 公共代码提取
如果多个页面中都引用了相同的模块或库，我们可以将这些公共模块提取出来，打包成一个单独的文件，然后在每个页面中引入这个公共文件。这样可以减小每个页面的文件大小，从而提高页面加载速度。
以下是一个公共代码提取的示例：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- - ------------------ - - ------------------------------- -------------- - - ------ - ------ ----------------- ------ ----------------- -------- ------------------ -- ------- - --------- -------------------------- ----- ----------------------- ------- -- ------------- - ------------ - ------------ - -------- - ----- ------------------------- ----- ---------- ------- ----- - - - -- -------- - --- --------------------- --- ------------------- ------ ------ ------ --------- ------------- ------- --------- ---------- --- --- ------------------- ------ ------ ---- --------- ------------- ------- --------- ---------- --- --- ------------------- ------ -------- ---- --------- --------------- ------- ----------- ---------- -- - --展开代码
在这个示例中，我们使用了一个优化插件 SplitChunksPlugin，它可以将公共模块提取出来，并打包成一个名为 vendors 的文件。我们还需要在 HtmlWebpackPlugin 插件中引入该文件，于是我们在每个 HTML 文件的 chunks 属性中添加了 vendors。
2. 按需加载
在多页面应用中，如果某些页面的内容很少使用，可以考虑将它们打包成一个单独的文件，并且在需要使用的时候，再进行加载。这样可以减小每个页面的文件大小，从而提高页面加载速度。
以下是一个按需加载的示例：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- - ------------------ - - ------------------------------- -------------- - - ------ - ------ ----------------- ------ ----------------- -------- ------------------ -- ------- - --------- -------------------------- ----- ----------------------- ------- -- ------------- - ------------ - ------------ - -------- - ----- ------------------------- ----- ---------- ------- ----- - - - -- -------- - --- --------------------- --- ------------------- ------ ------ ------ --------- ------------- ------- --------- ---------- --- --- ------------------- ------ ------ ---- --------- ------------- ------- --------- ---------- ------- --- --- ------------------- ------ -------- ---- --------- --------------- ------- ----------- ---------- -- - --展开代码
在这个示例中，我们使用了一个优化插件 BundleAnalyzerPlugin，它可以将多个模块打包成同一个 chunk 文件中。我们设置了一个 chunks 属性为 lazy 的 HTMLWebpackPlugin 插件，这个属性可以指定该文件需要异步加载。
如何调试多页面应用的 Webpack 配置？
在调试多页面应用的 Webpack 配置时，可以使用以下技巧：
1. 使用 Source Map
Source Map 可以将打包后的 JavaScript 代码映射到源代码中，方便开发者在浏览器端对代码进行调试。在 Webpack 配置中，可以通过设置 devtool 属性来生成 Source Map。
以下是一个使用 Source Map 的示例：
module.exports = { // ... devtool: 'inline-source-map', // ... };
在这个示例中，我们设置了 devtool 属性为 inline-source-map，表示在每个打包后的文件中，都会添加一个 Source Map 的 DataUrl，从而让浏览器能够更好地调试代码。
2. 使用 Webpack DevServer
Webpack DevServer 是一个开发环境中使用的服务器，它可以实时监测文件的变化，并且在文件变化时自动重新编译和刷新页面。在多页面应用中，我们需要将每个页面都配置到 DevServer 中，并指定每个页面对应的 HTML 文件。
以下是一个使用 Webpack DevServer 的示例：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- -------------- - - ------ - ------ ----------------- ------ ----------------- -------- ------------------ -- ------- - --------- -------------------------- ----- ----------------------- ------- -- ---------- - ------------ --------- ----- ----- ----- ---- -- -------- - --- ------------------- ------ ------ ------ --------- ------------- ------- --------- --- --- ------------------- ------ ------ ---- --------- ------------- ------- --------- --- --- ------------------- ------ -------- ---- --------- --------------- ------- ----------- -- - --展开代码
在这个示例中，我们设置了 DevServer 的 contentBase 属性为 ./dist，表示编译后的文件夹位置。我们还设置了 DevServer 的 port 属性为 3000，表示 Webpack DevServer 的端口为 3000。当我们执行 npm run start 后，Webpack DevServer 就会自动打开一个浏览器窗口，并跳转到 http://localhost:3000。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b88974306f20b3a6654b71
