Webpack 是一个非常流行的前端打包工具，它可以帮助我们将多个 JavaScript 文件打包成一个或多个 bundle，从而减少页面加载时间和带宽消耗，提高用户体验。但是，如果我们的项目有多个页面，每个页面都需要引入不同的 JavaScript 文件，那么该如何使用 Webpack 进行打包呢？本文将详细介绍如何使用 Webpack 对多个页面进行打包。
1. 创建项目
首先，我们需要创建一个基本的项目结构。在项目根目录下，创建一个 src 目录，用于存放源代码，再创建一个 dist 目录，用于存放打包后的代码。在 src 目录下，创建一个 index.html 文件和一个 index.js 文件，用于测试打包效果。
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- -------------- ---------- ------------ ------- ------ ---------- ------------- ------- ------------------------ ------- -------展开代码
// index.js console.log('Hello, Webpack!');
2. 配置 Webpack
接下来，我们需要配置 Webpack。在项目根目录下，创建一个 webpack.config.js 文件，用于存放 Webpack 的配置信息。我们需要使用 html-webpack-plugin 插件来自动生成 HTML 文件，以及使用 clean-webpack-plugin 插件来清理旧的打包文件。由于我们需要打包多个页面，所以需要使用 glob 模块来获取所有的 HTML 文件路径。
-- -------------------- ---- ------- -- ----------------- ----- ---- - ---------------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- - ------------------ - - -------------------------------- ----- --------- - -------------------------- -------------- - - ------ - ------ ----------------- -- ------- - --------- -------------------------- ----- ----------------------- -------- -- -------- - --- --------------------- --------------------------- -- - ----- -------- - ------------------------ ------ --- ------------------- --------- --------- --------- --------- ------- ---------- --- --- -- --展开代码
在上面的配置中，我们将 entry 属性设置为一个对象，其中 index 键对应的值为 ./src/index.js，表示我们的入口文件是 src/index.js。我们将 output.filename 属性设置为 [name].[contenthash].js，表示打包后的文件名为 entry 对象中键名对应的值加上一个哈希值，以避免浏览器缓存问题。我们将 output.path 属性设置为 dist 目录的绝对路径，表示打包后的文件存放在 dist 目录下。
接下来，我们使用 glob 模块获取所有的 HTML 文件路径，并使用 HtmlWebpackPlugin 插件自动生成 HTML 文件。我们将 plugins 属性设置为一个数组，其中第一个元素是 CleanWebpackPlugin 插件，用于清理旧的打包文件，后面的元素是 HtmlWebpackPlugin 插件，用于自动生成 HTML 文件。我们使用 map 方法遍历所有的 HTML 文件路径，为每个 HTML 文件生成一个 HtmlWebpackPlugin 实例，其中 filename 属性表示生成的 HTML 文件名，template 属性表示使用的 HTML 模板文件，chunks 属性表示引入的 JavaScript 文件。
3. 打包项目
最后，我们需要使用 Webpack 打包项目。在命令行中执行以下命令：
npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin glob --save-dev npx webpack --mode production
第一个命令用于安装 Webpack 和相关插件，第二个命令用于打包项目。我们将 --mode 参数设置为 production，表示打包生产环境代码。
打包完成后，我们可以在 dist 目录下看到生成的打包文件。打开 index.html 文件，可以看到页面正常显示，并且控制台输出了 Hello, Webpack!。
4. 总结
本文介绍了如何使用 Webpack 对多个页面进行打包。我们首先创建了一个基本的项目结构，然后配置了 Webpack，使用了 html-webpack-plugin 插件自动生成 HTML 文件，并使用了 clean-webpack-plugin 插件清理旧的打包文件。最后，我们使用 Webpack 打包项目，并验证了打包结果。本文的示例代码可以在 GitHub 上获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662bf678d3423812e4972a84
