前言
Webpack 是一个十分强大的模块打包器，它可以将各种资源文件（如 JavaScript、CSS、图片等）打包成一个或多个文件，以便于在浏览器中加载。Webpack4 是目前最新的版本，相较于旧版本，它在性能、功能和易用性方面都有了很大的提升。学习 Webpack4 可以让你少些 10 年经验，因为很多前端工程师在工作中都会用到 Webpack，而且对于一些高级的 Webpack 技巧，很多人并不了解。
本文将详细介绍 Webpack4 的各种功能和用法，并提供示例代码和实用的指导意义，希望能够帮助你更好地掌握 Webpack4。
安装和配置
Webpack4 的安装和配置相对于旧版本来说更加简单和易用。首先，我们需要安装 Node.js 和 npm，然后通过 npm 安装 Webpack4：
--- ------- ------- ----------- ----------
安装完成后，我们需要在项目根目录下创建一个 webpack.config.js 文件，用于配置 Webpack4。下面是一个简单的配置示例：
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--这个配置文件指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。
打包 JavaScript
Webpack4 可以打包各种类型的 JavaScript 模块，包括 CommonJS、ES6 模块、AMD 等。在打包 JavaScript 时，我们可以使用各种插件和 loader 来处理不同的情况。
使用 Babel 处理 ES6
Babel 是一个 JavaScript 编译器，可以将 ES6 代码转换为 ES5 代码，以便在旧版浏览器中运行。在 Webpack4 中，我们可以通过 babel-loader 和 .babelrc 文件来使用 Babel。
首先，我们需要安装 Babel 相关的依赖：
--- ------- ------------ ----------- ----------------- ----------
然后，我们需要在项目根目录下创建一个 .babelrc 文件，用于配置 Babel。下面是一个简单的配置示例：
- ---------- --------------------- -
最后，我们需要在 Webpack4 的配置文件中添加 babel-loader 配置：
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--使用 UglifyJS 压缩代码
UglifyJS 是一个 JavaScript 压缩器，可以将 JavaScript 代码压缩为更小的体积。在 Webpack4 中，我们可以通过 uglifyjs-webpack-plugin 插件来使用 UglifyJS。
首先，我们需要安装 uglifyjs-webpack-plugin 插件：
--- ------- ----------------------- ----------
然后，我们需要在 Webpack4 的配置文件中添加插件配置：
----- -------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
-
--使用 Tree Shaking 去除无用代码
Tree Shaking 是一个用于去除无用代码的技术，可以将 JavaScript 模块中未被使用的代码移除。在 Webpack4 中，我们可以通过 webpack.optimize.ModuleConcatenationPlugin 插件来使用 Tree Shaking。
首先，我们需要在 Webpack4 的配置文件中添加插件配置：
-------------- - -
-- ---
-------- -
--- --------------------------------------------
-
--打包 CSS
Webpack4 可以将 CSS 文件打包到 JavaScript 文件中，也可以将 CSS 文件单独打包成一个或多个文件。在打包 CSS 时，我们可以使用各种插件和 loader 来处理不同的情况。
使用 css-loader 和 style-loader 处理 CSS
css-loader 和 style-loader 是两个常用的 loader，可以将 CSS 文件打包到 JavaScript 文件中，并将样式应用到 HTML 页面中。
首先，我们需要安装 css-loader 和 style-loader：
--- ------- ---------- ------------ ----------
然后，我们需要在 Webpack4 的配置文件中添加 loader 配置：
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-
--使用 MiniCssExtractPlugin 将 CSS 单独打包
MiniCssExtractPlugin 是一个插件，可以将 CSS 文件单独打包成一个或多个文件。在 Webpack4 中，我们可以通过 MiniCssExtractPlugin 插件来使用它。
首先，我们需要安装 mini-css-extract-plugin 插件：
--- ------- ----------------------- ----------
然后，我们需要在 Webpack4 的配置文件中添加插件配置：
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- -------------
-------------- ----------
--
-
--打包图片和字体
Webpack4 可以将各种类型的图片和字体文件打包成一个或多个文件，以便于在浏览器中加载。在打包图片和字体时，我们可以使用各种插件和 loader 来处理不同的情况。
使用 file-loader 处理图片和字体
file-loader 是一个常用的 loader，可以将图片和字体文件打包成一个或多个文件，并返回文件的 URL。
首先，我们需要安装 file-loader：
--- ------- ----------- ----------
然后，我们需要在 Webpack4 的配置文件中添加 loader 配置：
-------------- - -
-- ---
------- -
------ -
-
----- --------------------------------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
-
-
-
-
-
-
--使用 url-loader 处理小图片
url-loader 是一个可以将小图片（小于指定大小）打包成 Data URL 的 loader，以便于在 JavaScript 中使用。
首先，我们需要安装 url-loader：
--- ------- ---------- ----------
然后，我们需要在 Webpack4 的配置文件中添加 loader 配置：
-------------- - -
-- ---
------- -
------ -
-
----- -------------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ---------
-
-
-
-
-
-
--Webpack4 高级技巧
除了上述常用功能外，Webpack4 还有许多高级的技巧，可以让我们更好地优化打包结果和提高开发效率。
使用 DllPlugin 和 DllReferencePlugin 加速打包
DllPlugin 和 DllReferencePlugin 是两个插件，可以将一些稳定的第三方库单独打包成一个或多个文件，以便于在开发过程中复用和快速打包。在打包时，我们只需要引用这些文件即可，而不需要重新打包这些库。
首先，我们需要创建一个 webpack.dll.config.js 文件，用于配置要打包的第三方库：
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- --------- ------------ ---------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- ----------------
--
-------- -
--- -------------------
----- -----------------
----- ----------------------- ----------------------------
--
-
--然后，我们需要在 webpack.config.js 文件中添加 DllReferencePlugin 配置：
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
--------- --------------------------------------
--
-
--最后，我们需要在 HTML 页面中引用打包好的文件：
------ ---- ---------------- ------- ----------------------------- ------- ------------------------- -------
使用 Hot Module Replacement 实现热更新
Hot Module Replacement（简称 HMR）是一个可以在运行时替换模块的技术，可以实现无需刷新页面即可更新代码的效果。在 Webpack4 中，我们可以通过 webpack-dev-server 插件来使用 HMR。
首先，我们需要安装 webpack-dev-server：
--- ------- ------------------ ----------
然后，我们需要在 Webpack4 的配置文件中添加 devServer 配置：
-------------- - -
-- ---
---------- -
------------ ---------
---- ----
--
-------- -
--- ------------------------------------
-
--最后，我们需要在入口文件中添加 HMR 相关的代码：
-- ------------ - -------------------- -
总结
本文介绍了 Webpack4 的各种功能和用法，包括安装和配置、打包 JavaScript、打包 CSS、打包图片和字体、高级技巧等。通过学习本文，你可以更好地掌握 Webpack4，并提高开发效率和优化打包结果。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660cb168d10417a222d02322