介绍
Webpack 是一个打包工具，它可以将代码和资源打包为静态文件，以便在浏览器中使用。对于单页面应用（SPA），Webpack 已成为事实上的标准。但是，对于多页面应用（MPA），Webpack 的使用并不是那么显然，因为需要同时打包多个入口文件。在本文中，我们将介绍如何使用 Webpack 实现多页面应用的打包。
准备工作
在开始之前，我们先需要准备一个基本的项目。我们假设每个 HTML 页面都有一个 JS 入口文件，这些页面拥有自己的 CSS 样式，并且一些页面可能还会使用共享的 JavaScript 或样式代码。项目的结构可能类似于以下示例：
-- -------------------- ---- ------- --------- --- --- - --- ---------- - --- -------- - --- ---------- - --- -------- - --- ------ - - --- ---------- - - --- --------- - - --- --------- --- ----
配置文件
我们需要在项目根目录下创建一个 webpack.config.js 文件，用于配置 Webpack 的行为。下面是一个简单的配置文件示例：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------- - -------- ----------------- -------- ---------------- --- -------- - ----------- ------------------- ------- ----------------------- ------- --- -------- - -------- - ---- --------- --------- -------- - -------------------- ----------------- ----- ---- --- -- --
这个配置文件指定了两个入口（entry）文件：index.js 和 about.js，这两个文件将打包为 index.bundle.js 和 about.bundle.js。打包后的文件将存储在 dist/ 目录下。module 部分的配置表示，在遇到 .css 文件时，使用 style-loader 和 css-loader 进行处理。
插件
对于多页面应用，我们通常需要使用到一些与打包无关的功能。例如，将来自共享 JavaScript 和 CSS 文件的代码提取出来以便于缓存，或者注入一个动态规则来调整链接文本。对于这些功能，Webpack 提供了一些插件，我们可以在配置文件中配置它们。以下是一些比较有用的插件：
HtmlWebpackPlugin：用于生成 HTML 文件，并在 HTML 文件中引入打包后的 JS 和 CSS 文件。CleanWebpackPlugin：在每次构建之前清除dist/目录。ExtractTextWebpackPlugin：提取共享的 CSS 代码，避免在每个页面中都重复引入。CommonsChunkPlugin：提取出共享的 JavaScript 代码。
我们需要使用这些插件来优化和处理我们的多页面应用，例如：
-- -------------------- ---- ------- -------- - ---- ----------------------------- ---- ------------------- ----------- ------------------- ----------- ------------- --------- --------- ---- ---- ------------------- ----------- ------------------- ----------- ------------- --------- --------- ---- ---- -------------------------- ----------- ------------- ------------ ---- ---- ---- ------------------------------------- ------- -------- --- -
在这个配置文件中，我们配置了四个插件：CleanWebpackPlugin，HtmlWebpackPlugin，ExtractTextWebpackPlugin 和 CommonsChunkPlugin。这些插件将生成两个 HTML 文件，将共享的 JavaScript 和 CSS 打包进 common.bundle.js 和 common.css。
总结
在本文中，我们已介绍了如何使用 Webpack 实现多页面应用的打包，包括配置文件和一些常用插件。如果您正在处理一个多页面应用，那么这些技巧和示例代码将对您非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f2153968c7c53b0d864dc