在前端开发中，我们经常使用 Webpack 来对代码进行打包、压缩和优化，来提升网站的性能。但是，大部分的 Webpack 学习资料都是针对单页应用的，而在实际开发中，也会遇到需要打包多个页面的情况。本文将介绍如何搭建 webpack 多页面打包环境，让你的多页面应用也可以享受到 Webpack 的优势。
准备工作
在开始之前，我们需要准备好以下工具和软件：
- Node.js
- NPM 或 Yarn
- IDE 或文本编辑器，如 VSCode
创建项目
打开命令行窗口，输入以下命令来创建一个新的项目：
mkdir webpack-multi-page cd webpack-multi-page npm init -y
执行完上述命令后，我们会在当前目录下创建一个名为 webpack-multi-page 的项目，并进行初始化。
安装 webpack 和 webpack-cli
接下来，我们需要安装 webpack 和 webpack-cli，这是我们进行打包的工具。
输入以下命令来安装：
npm install webpack webpack-cli --save-dev
配置 webpack
首先，在项目根目录下创建一个 webpack.config.js 文件。
配置 entry
因为我们要打包多个页面，所以我们需要将每个页面对应的 JavaScript 文件作为 entry。在 webpack.config.js 文件中添加如下代码：
const path = require('path'); module.exports = { entry: { home: './src/home.js', about: './src/about.js', } };
以上代码中，我们定义了两个 entry：home 和 about，表示我们要打包的是 home.js 和 about.js 这两个文件。
配置 output
接下来，我们需要定义打包后的输出目录和文件名。
-- -------------------- ---- ------- -------------- - - ------ - ----- ---------------- ------ ----------------- -- ------- - ----- ----------------------- -------- --------- ------------------- -- --展开代码
以上代码表示我们将打包后的文件输出到 dist 目录下，每个文件名格式为 [name].[hash].js，其中 [name] 表示 entry 的 key，[hash] 表示文件内容的 hash。
配置多页面
在上述配置中，我们已经定义了入口和出口，但是还需要注意的是多页面应用的入口 HTML 文件。
-- -------------------- ---- ------- -------------- - - ------ - ----- ---------------- ------ ----------------- -- ------- - ----- ----------------------- -------- --------- ------------------- -- -------- ---- ------------------- ------ ------- --------- ------------ --------- ------------------ ------- --------- --- --- ------------------- ------ -------- --------- ------------- --------- ------------------- ------- ---------- --- --展开代码
以上代码中，我们使用了 HtmlWebpackPlugin 插件来自动生成 HTML 文件。在这里，我们为每个页面定义了一个 HTML 文件，并确保只包含该页面的 JS 文件。
配置 loader
由于我们需要处理多个类型的文件，如 CSS、图片、字体等，所以需要使用 loader 对这些文件进行处理。
在 webpack.config.js 文件中添加如下代码：
-- -------------------- ---- ------- -------------- - - ------ - ----- ---------------- ------ ----------------- -- ------- - ----- ----------------------- -------- --------- ------------------- -- -------- ---- ------------------- ------ ------- --------- ------------ --------- ------------------ ------- --------- --- --- ------------------- ------ -------- --------- ------------- --------- ------------------- ------- ---------- ---- ------- - ------ - - ----- --------- ---- ---------------- -------------- -- - ----- ----------------------- ---- ---------------- -- - ----- ------------------------------ ---- ---------------- -- -- -- --展开代码
以上代码就定义了一些常用的 loader。这里我们使用了 style-loader 和 css-loader 来处理 CSS 文件，使用 file-loader 来处理字体、图片等文件。
配置 DevServer
如果不希望在每次修改代码后都需要手动编译并刷新浏览器，我们可以使用 DevServer 来自动编译并刷新浏览器。
在 webpack.config.js 文件中添加如下代码：
-- -------------------- ---- ------- -------------- - - ------ - ----- ---------------- ------ ----------------- -- ------- - ----- ----------------------- -------- --------- ------------------- -- -------- ---- ------------------- ------ ------- --------- ------------ --------- ------------------ ------- --------- --- --- ------------------- ------ -------- --------- ------------- --------- ------------------- ------- ---------- ---- ------- - ------ - - ----- --------- ---- ---------------- -------------- -- - ----- ----------------------- ---- ---------------- -- - ----- ------------------------------ ---- ---------------- -- -- -- ---------- - ------------ -------------------- -------- --------- ----- ----- ---- -- --展开代码
在以上代码中，我们定义了 DevServer 的配置，如 contentBase 表示 DevServer 从哪个目录读取文件，compress 表示是否启用 gzip 压缩，port 表示监听的端口号。
编写代码
现在我们已经完成了 Webpack 的配置，接下来就可以开始编写代码了。
在项目根目录下创建一个 src 目录，并在其中创建 home.js 和 about.js 文件。这里只需要一个简单的 alert：
home.js:
alert('This is home page.');
about.js:
alert('This is about page.');
然后，我们在 src 目录下创建一个 home.html 文件，并在其中引入 Home 页面所需的样式及 JS 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ------- ------ -------- -- ---- ---------- ------- ------------------------------ ----- ---------------- ----------------------- ------- -------展开代码
同理，我们在 src 目录下创建一个 about.html 文件，并在其中引入 About 页面所需的样式及 JS 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------- ------- ------ -------- -- ----- ---------- ------- ------------------------------- ----- ---------------- ------------------------ ------- -------展开代码
最后，我们在 src 目录下创建一个 style.css 文件，并在其中添加一些样式。
body { background-color: #f5f5f5; } h1 { color: #333; }
运行项目
在 package.json 文件中，我们添加如下命令：
"scripts": { "start": "webpack-dev-server --open", "build": "webpack" }
在命令行中输入一下命令：
npm run start然后在浏览器中打开 http://localhost:9000/home.html 和 http://localhost:9000/about.html，就可以看到我们编写的两个页面了。
如果要生产环境打包，则使用命令：
npm run build总结
本文介绍了如何搭建一个支持多页面的 Webpack 打包环境，为你在实际开发中处理多页应用提供了指导。同时，对于表示缩写的一些工具，建议同志们了解一下，例如webpack、NPM等。如果在安装的时候需要科学上网，且不建议使用免费的VPN。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6536264b7d4982a6ebe07a1b
