一套 Webpack 配置，适用于常规多页面应用
Webpack 是当下最流行的 JavaScript 模块打包工具之一，它的强大功能和灵活性使得它成为了前端工程师不可或缺的工具。本文将介绍一套适用于常规多页面应用的 Webpack 配置，内容详细，涵盖深度和学习以及指导意义，并包含示例代码。
- 前置知识
在学习本文之前，你需要具备以下前置知识：
- 基本的 HTML、CSS 和 JavaScript 知识
- Node.js 和 NPM 的安装和使用
- Webpack 的基本概念和使用方法
- 需求分析
在开始配置之前，我们需要明确我们的需求。本文适用于常规多页面应用，因此我们需要支持以下功能：
- 为每个页面生成对应的 HTML、CSS 和 JavaScript 文件
- 支持模块化代码，例如使用 ES6 import/export
- 支持代码分离和懒加载，减少首屏加载时间
- 支持 CSS 预处理器，并将 CSS 单独打包
- 支持自动刷新和热更新
- 配置过程
我们将从零开始配置一套适用于常规多页面应用的 Webpack 配置，并带有详细的注释说明。在配置过程中，我们将使用以下开发环境：
- 操作系统：macOS 11.0.1
- Node.js 版本：14.15.1
- NPM 版本：6.14.8
- Webpack 版本：5.22.0
3.1 初始化项目
首先，我们需要在项目根目录下创建一个 package.json 文件。在终端中进入项目根目录，运行以下命令：
npm init -y
这将创建一个默认的 package.json 文件。
3.2 安装依赖
接下来，我们需要安装 Webpack 和它的一些相关插件。在终端中进入项目根目录，运行以下命令：
npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin style-loader css-loader sass-loader node-sass mini-css-extract-plugin postcss autoprefixer babel-loader @babel/core @babel/preset-env -D
这些插件的作用分别是：
- webpack：Webpack 的核心库
- webpack-cli：Webpack 的命令行工具
- html-webpack-plugin：自动生成 HTML 文件，并将打包后的 JS 文件自动引入到 HTML 文件中
- clean-webpack-plugin：每次构建前清理打包目录
- style-loader：将样式以内联方式添加到 HTML 页面中
- css-loader：处理 CSS 文件中的 import 和 url，以及 resolve 后缀名
- sass-loader：将 Sass/Scss 编译为 CSS
- node-sass：sass-loader 的依赖包
- mini-css-extract-plugin：将 CSS 单独打包成文件
- postcss: 一个 CSS 后处理器，用于自动添加浏览器前缀和其他一些功能
- autoprefixer: 自动添加浏览器前缀
- babel-loader：处理 ES6/7/8 等 JavaScript 代码
- @babel/core: Babel 的核心库
- @babel/preset-env: 配置 Babel 的转换规则，用于将 ES6/7/8 等 JavaScript 代码转换为浏览器兼容的 ES5 代码
3.3 配置文件
接下来，我们将创建一个名为 webpack.config.js 的文件，并进行基本配置。在项目根目录中创建一个名为 webpack.config.js 的文件，输入以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- -------------------- - -----------------------------------
----- ------------ - ------------------------
-------------- - -
----- --------------
------ -
------ -----------------
------ -----------------
--
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------------
---- -
------- ---------------
--
-------- ---------------
--
-
----- ----------
---- -
----------------------------
-
------- -------------
-------- -
-------------- --
-------- -
--------------- ------------------------------------
--
--
--
-----------------
--------------
--
--
-
----- -----------------------
---- -
-
------- --------------
-------- -
----------- ---------
--
--
--
--
--
--
-------- -
--- -------------------
--------- -------------
--------- -------------------
------- -----
------- ----------
---
--- -------------------
--------- -------------
--------- -------------------
------- -----
------- ----------
---
--- ---------------------
--- ----------------------
--------- -------------
-------------- -----------
---
--
------------- -
------------ -
------- ------
------------ -
-------- -
----- ----------
----- -------------------------
--------- ----
--
--
--
--
---------- -
------------ ---------
----- -----
--
-------- -
----------- ------- --------
--
-------- --------------------
------- ------
------ --------------
--这些配置的作用分别是：
- mode：指定当前环境的环境，development 表示开发环境，production 表示生产环境
- entry：设置入口文件路径，支持多个入口文件
- output：设置输出文件路径和文件名
- module.rules：设置不同类型文件的 Loader
- rules.test：设置 Loader 应用于的文件类型
- rules.use：设置使用哪些 Loader
- rules.exclude：设置不应用 Loader 的文件
- plugins：设置插件
- optimization.splitChunks：打包时自动将公共模块抽离成独立的文件，以减少打包后的体积
- devServer：开启本地开发服务器，并指定 static 路径
- resolve.extensions：设置可以省略的后缀名
- devtool：设置源映射类型
- target：设置打包的目标环境
- stats：控制输出日志的形式
接下来，我们将对这些配置进行详细解释。
3.3.1 mode
mode 用于指定当前环境的环境，可选值为 development 和 production。在开发环境中，我们将使用 development 模式，以便于调试和查看错误信息。在生产环境中，我们将使用 production 模式，以便于对代码进行优化和压缩。在本文中，我们将只讨论开发环境的 Webpack 配置。
3.3.2 entry
entry 用于指定入口文件路径，支持多个入口文件。在本例中，我们将有两个入口文件：index.js 和 about.js。这两个文件将分别用于生成 index.html 和 about.html 页面。
3.3.3 output
output 用于指定输出文件路径和文件名。在本例中，我们将输出文件保存在 dist 目录下，输出文件名将根据入口文件名生成。例如，index.js 会生成 index.js 文件。
3.3.4 module.rules
module.rules 用于设置不同类型文件的 Loader。每个 Loader 都是一个函数，用于将符合条件的文件转换为 JavaScript 模块或者其他格式。
在本例中，我们使用了三个 Loader：
- babel-loader：处理 ES6/7/8 等 JavaScript 代码
- sass-loader：将 Sass/Scss 编译为 CSS
- file-loader：处理图片等文件
对于 JavaScript 文件，我们使用 babel-loader 处理，并排除 node_modules 目录下的文件。这样我们就可以使用 ES6/7/8 等新特性编写 JavaScript 代码。
对于 Sass/Scss 文件，我们使用 sass-loader 将其编译为 CSS，并使用 postcss-loader 自动添加浏览器前缀。然后，我们使用 css-loader 处理 CSS 文件中的 import 和 url，以及 resolve 后缀名。最后，我们使用 MiniCssExtractPlugin.loader 将 CSS 单独打包成文件。
对于图片等文件，我们使用 file-loader 处理，并设置 outputPath 为 images。这样我们就可以在 HTML 或 CSS 中引用这些图片。
3.3.5 plugins
plugins 用于设置插件。插件是一些功能强大的模块，用于在 Webpack 打包过程中进行额外的处理和优化。
在本例中，我们使用了以下插件：
- HtmlWebpackPlugin：自动生成 HTML 文件，并将打包后的 JS 文件自动引入到 HTML 文件中
- CleanWebpackPlugin：每次构建前清理打包目录
- MiniCssExtractPlugin：将 CSS 单独打包成文件
HtmlWebpackPlugin 将根据配置生成对应的 HTML 文件，并将打包后的 JavaScript 文件自动引入 HTML 文件中。我们为每个页面都创建了一个对应的 HTML 文件。
CleanWebpackPlugin 可以每次构建前清理打包目录。这样可以确保我们生成的打包文件是最新的。
MiniCssExtractPlugin 可以将 CSS 单独打包成文件，减少页面加载时间。我们使用它来将编译后的 CSS 文件从 JavaScript 文件中分离出来。
3.3.6 optimization.splitChunks
optimization.splitChunks 可以打包时自动将公共模块抽离成独立的文件，以减少打包后的体积。我们将 vendors 抽离出来，以保证公共模块只会打包一次，而不是每个页面都打包一次。
3.3.7 devServer
devServer 用于开启本地开发服务器，并指定 static 路径。我们设置 contentBase 参数为 ./dist，指定静态文件路径为打包后的 dist 目录。
我们还设置了 open 参数为 true，表示在启动开发服务器后自动打开浏览器。
3.3.8 resolve.extensions
resolve.extensions 用于设置可以省略的后缀名。在本例中，我们设置可以省略.js 和.jsx 后缀名，以便于在 import 时不需要写文件后缀名。
3.3.9 devtool
devtool 用于设置源映射类型。在开发环境中，设置 inline-source-map 可以生成源映射文件，方便我们调试代码。
3.3.10 target
target 用于设置打包的目标环境。在本例中，我们设置为 web，表示打包后的代码是可以运行在浏览器环境中的。
3.3.11 stats
stats 用于控制输出日志的形式。在本例中，我们设置为 errors-only，只输出错误信息。
- 示例代码
以上就是一套适用于常规多页面应用的 Webpack 配置。接下来，我们将通过示例代码来展示如何使用这个配置。
4.1 目录结构
在开始示例代码之前，我们先来看一下项目的目录结构：
-- -------------------- ---- ------- -------- -- ---- - -- -------- - -- -------- - -- ---------- - -- ---------- - -- ---------- - -- ---------- - -- ------- - -- -------- -- ----- - -- ---------- - -- ---------- - -- -------- - -- -------- - -- ---------- - -- --------- - -- --------- - -- ------- - -- -------- -- ----------------- -- ------------
在 src 目录下，我们分别有 index.js、index.scss 和 index.html，about.js、about.scss 和 about.html 三个文件。这些文件分别对应着首页和关于页面的 JavaScript、CSS 和 HTML 文件。
在 images 目录中，我们存放了一个图片文件，用于在页面中展示图片。
在 dist 目录中，我们生成的打包文件将保存在此处。
4.2 index.js 和 about.js
现在我们来看一下 index.js 和 about.js 的代码实现：
-- -------------------- ---- ------- -- -------- ------ --------------- ------ ---- ---- -------------------- ------------------- ----- -------- ----- --- - ------------------------------ ------- - ----- ------------------------------- -- -------- ------ --------------- ------------------- ----- --------
这两个文件非常简单，我们在 index.js 文件中引入了一个 Sass 样式和一张图片，并将图片添加到 HTML 页面中。在 about.js 文件中，我们没有引入图片，仅仅引入了一个 Sass 样式。
4.3 index.html 和 about.html
我们的 HTML 文件也非常简单，仅仅包含了一个 H1 标题和一些其他元素。在这些元素中，我们包含了 JavaScript 和 CSS 文件的引用。
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ------------ ----- ---------------- ----------------- ------- ------ ---------- ----- ---------- ---- ---------------------- ----------- ------- ------------------------ ------- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ------------ ----- ---------------- ----------------- ------- ------ ---------- ----- ---------- ------- ------------------------ ------- -------
4.4 index.scss 和 about.scss
最后，我们来看一下 index.scss 和 about.scss 的实现。这两个文件都非常简单，只是为了演示如何使用 Sass 样式。
-- -------------------- ---- ------- -- ---------- --------------- -------- ---- - ----------------- --------------- - -- - ------ ------ - -- ---------- ----------------- -------- ---- - ----------------- ----------------- - -- - ------ ------ -
- 运行项目
现在，我们已经完成了一套适用于常规多页面应用的 Webpack 配置。我们来运行一下这个项目，看一下打包后的结果。
在终端中进入项目根目录下，运行以下命令：
npm run dev
这将开启一个本地开发服务器，在浏览器中访问 http://localhost:8080/index.html 和 http://localhost:8080/about.html，即可查看打包后的结果。
如需打包生产环境版本，运行以下命令：
npm run build
这将会在 dist 目录下生成生产环境可用的打包代码。
总结
本文介绍了一套适用于常规多页面应用的 Webpack 配置，并包含了详细的配置过程和示例代码。这套配置涵盖了常用功能，例如：为每个页面生成对应的 HTML、CSS 和 JavaScript 文件、支持模块化代码、支持代码分离和懒加载、支持 CSS 预处理器，并将 CSS 单独打包、支持自动刷新和热更新等。希望对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518e27495b1f8cacd125a3f