1. 什么是 Webpack
Webpack 是一个用于构建前端应用的打包工具。它能够将各种前端资源，如 JavaScript、CSS、图片、字体等，进行模块化打包，并生成符合要求的静态资源文件。
Webpack4 是 Webpack 的最新版本，和前几个版本相比，它更加灵活，更加易用，同时拥有更好的性能。
2. 为什么需要模块化打包
在传统的前端开发中，我们通常需要手动引入多个文件，并且需要考虑它们之间的依赖关系。这样往往会导致代码冗余，维护困难，依赖关系混乱等问题。而模块化打包正是为了解决这些问题。
Webpack 将所有前端资源看作一个个独立的模块，通过打包工具将这些模块进行合并、优化、处理，最终生成最小化、兼容性好、性能良好的静态资源文件。这样就能够大大减少代码的冗余、提高代码的可维护性、提高代码的性能和可读性。
3. 使用 Webpack4 进行模块化打包
3.1 安装 Webpack4
Webpack4 的安装非常简单，只需要在命令行中执行以下命令：
npm install webpack webpack-cli --save-dev
3.2 创建 Webpack 配置文件
Webpack 的配置文件是一个 JS 模块，用于配置 Webpack 的各种参数、插件等。在项目根目录下创建一个名为 webpack.config.js 的文件，该文件即为 Webpack 的配置文件。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- ------------- -- ----
------ ----------------- -- ----
------- - -- ----
--------- --------------------- -- ----
----- ----------------------- ------- -- ----
--
------- - -- ----
------ -- -- ---- ------
--
-------- -- -- ----
--3.3 配置 entry 和 output
entry 和 output 是 Webpack4 配置文件中最基本的两个参数，它们分别表示入口文件和输出配置。
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 输出配置
filename: '[name].[hash:8].js', // 文件名称
path: path.resolve(__dirname, 'dist') // 输出目录
},
};上面的配置表示，入口文件为 src/index.js，输出文件的名称为 name，其中 name 为入口文件的名称，输出文件的后缀名为 .js。此外，还配置了输出目录为 dist。
3.4 配置模块加载器
模块加载器（Loader）用于将模块转换成 Webpack 可以使用的模块，也可以对模块进行处理。 Webpack4 中必须使用 loader 来处理非 JavaScript 文件，如 CSS、图片、字体等。
-- -------------------- ---- -------
-------------- - -
------- - -- ----
------ - -- ---- ------
-
----- --------- -- ----
---- ---------------- ------------- -- ---- ------
-
-
--
--上面的配置表示，当遇到以 .css 结尾的文件时，使用 style-loader 和 css-loader 两个 loader 对其进行处理。其中 css-loader 的作用是将 CSS 文件转换为 JavaScript 模块，style-loader 的作用是将样式插入到 HTML 的 head 标签中。
3.5 配置插件
插件（Plugin）用于在 Webpack4 的构建过程中进行扩展和自定义。最为常用的插件之一就是 UglifyJS 插件，用于压缩和优化 JavaScript 代码。
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-------- - -- ----
--- ---------------- -- ----- ---------- --
------ -----
--------- -----
---------- ----
--
-
--上面的配置表示，使用 UglifyJS 插件对 JavaScript 代码进行压缩和优化，并开启了缓存、并行构建、生成 sourceMap 等功能。
3.6 运行 Webpack4
在命令行中执行以下命令即可启动 Webpack4：
npx webpack
4. 示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ---------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- ---------------- -------------
--
-
----- -----------------------
---- ---------------
--
-
----- ------------------------------
---- ---------------
--
-
--
-------- -
--- ----------------
------ -----
--------- -----
---------- ----
--
-
--5. 总结
Webpack4 是一个优秀的前端打包工具，能够将前端资源进行模块化打包，优化代码，减少冗余代码，提高代码的性能、可维护性和可读性。本文对 Webpack4 的模块模式进行了详细的介绍和指导，希望能够为前端开发者们提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ed47a48841e9894d3d956