前置知识
在了解本文所涉及的 Webpack 插件前，你需要先掌握以下几个基础知识：
- Webpack 基础配置
- Webpack 打包流程
- Node.js 基础
插件概述
Webpack 插件是一个能够在 Webpack 构建过程中生效的、扩展 Webpack 功能的 JS 模块，它可以对 Webpack 流程中的各阶段进行干预，改变构建结果或者增强构建效果。Webpack 插件需要在 Webpack 配置文件中进行配置，以便让它们能够正常工作。
本文将会介绍一些 Webpack 中常用的插件及其使用方法。
1. clean-webpack-plugin
在多次打包时，构建出来的文件会覆盖原来的文件，这会导致一些已被删除的旧文件实际上仍存在于浏览器缓存之中，使客户端拿到的是旧的资源文件，从而导致缓存混乱。为了解决这个问题，我们可以使用 clean-webpack-plugin 插件，在重新构建之前自动清空构建目录中的旧文件。
-- -------------------- ---- -------
----- ------------------ - --------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
--
-- ---
--2. html-webpack-plugin
html-webpack-plugin 可以根据模板自动构建 HTML 文件，并将打包后的 JS/CSS 文件链接到 HTML 文件中。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- -------------
--------- ------------
---
--
-- ---
--3. copy-webpack-plugin
在 Webpack 中，我们可以通过打包图片的方式，将图片打包成一个连续的图片文件，通过 base64 的方式引用到项目中。但是这种方式处理的图片不能缓存，而且会影响性能。为了解决这个问题，我们可以使用 copy-webpack-plugin 插件，将图片等静态资源文件复制到构建目录中。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
-- ------ ------------- ----------------- ---
- ----- ----------- --- ---------- -
---
--
-- ---
--4. mini-css-extract-plugin
Webpack 可以将 css 代码打包进 JS 文件中，也可以将多个 CSS 文件合并成一个 CSS 文件导入到 HTML 中。但是这种方式会导致 HTTP 请求数量过多，进而影响页面的渲染速度。所以我们可以使用 mini-css-extract-plugin 插件，将 CSS 文件单独拎出来打包。
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- -----------------
---- -
-- --------------------------- --- --------------
-
------- ----------------------------
-------- -
-- ------ ----------
-- ---- ----------------------- ----------
----------- -----
--
--
-------------
-----------------
--------------
--
--
--
--
-------- -
--- ----------------------
-- ------- ------- -- --- ---- ------- -- ---------------------
-- --- ------- --- --------
--------- -----------------
-------------- ---------------
------------ ------ -- ---- ---------- ----
---
--
-- ---
--5. webpack-bundle-analyzer
随着模块的增多，Webpack 打包会变得越来越慢，此插件可以帮助我们分析和解决此类问题，以便在上线前更好地优化打包文件。我们可以通过使用 webpack-bundle-analyzer 了解打包后所有模块的构成，从而更好地进行优化。
-- -------------------- ---- -------
----- - -------------------- - - -----------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------
--
-- ---
--6. DefinePlugin
可以根据定义的环境变量，区分开发环境与生产环境。
-- -------------------- ---- -------
----- - ------------ - - -------------------
----------------
-------- -
-- ------------ ----------------------------------
--- --------------
-------------- -
--------- -----------------------------
--
---
--
---7. ProvidePlugin
在我们的代码中引入一些使用频率很高的库，如 jQuery、lodash 等，每次 import 都会很繁琐。使用 ProvidePlugin 可以在每个模块中注入一个变量，使这个变量无需再 require/import，我们可以直接使用。
-- -------------------- ---- -------
----- - ------------- - - -------------------
----------------
-------- -
--- ---------------
-- ---------
------- ---------
-- ---------
---
--
---总结
通过本文，你已经了解到了 Webpack 常用插件及其使用方法。适当的插件会极大地提升构建效率，使得 Webpack 的打包流程更加顺畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471bdb9968c7c53b0f9dd95