看，这些|看，这些 plugins 常用又简单看，这些plugins常用又简单

前面文章中体验了webpack的打包、解析css资源、处理图片字体等文件接下来看看 plugins 有什么作用吧~
项目路径如下，和上一篇处理图片字体等文件项目保持一致

demo ├─ src │├─ css ││├─ index.css ││└─ file.css │├─ img ││├─ portrait.png ││└─ sky.jpg │├─ js ││├─ component.js ││└─ createElement.js │└─ index.js ├─index.html ├─package.json └─webpack.config.js

clean-webpack-plugin
我们通过 npm run build 来生成打包后文件夹 dist ，但每次打包后是删除 dist 重新创建文件夹，还是仅覆盖同名文件呢？
答案是：仅覆盖同名文件
我们在 dist 文件夹中新建一个 hello.txt 文件，再通过 npm run build 重新编译，发现 hello.txt 文件仍然存在，也就是说 dist 文件夹没有被删除和重新创建

文章图片

如果在 webpack.config.js 文件中修改配置，打包后文件名发生变化，打包文件夹不被删除，只会覆盖同名文件，会导致文件夹越来越大，除了每次手动删除，还可以使用 clean-webpack-plugin。
通过 npm i clean-webpack-plugin -D 安装依赖，在 webpack.config.js 中配置 plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { // 其它配置省略 plugins: [new CleanWebpackPlugin()], };

再次通过 npm run build 编译，发现我们创建的 hello.txt 文件就已经被删除，已经可以通过 plugin 自动删除 dist 文件夹啦~
html-webpack-plugin
目前用于查看打包结果的方式是，通过项目根目录下的 index.html 文件，引入编译后的 js 文件，但这种方式存在两个问题。

当 js 文件非常多时，需要一个个引入，可能有遗漏
在发布线上的时候，编译后的 dist 文件夹作为静态资源，里面需要有 index.html 作为入口文件，而手动将根目录下的 index.html 移动过去，可能需要修改大量的文件路径

html-webpack-plugin 提供了自动生成 html 文件并引入资源的功能，可以解决以上问题
通过 npm install html-webpack-plugin -D 安装依赖，并在 webpack.config.js 中配置

const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { // 其它配置省略 plugins: [ new HtmlWebpackPlugin({ // 自定义 index.html 的 title title: "hello webpack", }), ], };

编译后入口文件 bundle.js 会被自动引入到 index.html 中
【看，这些|看，这些 plugins 常用又简单】

文章图片

html-webpack-plugin 中 ejs 文件就是用于生成 html 的模板

文章图片

但比如 vue、react 的入口 index.html 文件中需要添加 id 为 app 或者 root 的 div 标签，使用默认的 html 模板就不合适了，html-webpack-plugin 提供了自定义模板文件的选项。
将 vue 中位于 public 文件夹下 index.html 的模板文件复制过来

文章图片

在 webpack.config.js 中配置自定义模板文件

module.exports = { // 其它配置省略 plugins: [ new HtmlWebpackPlugin({ // 自定义 index.html 的 title title: "hello webpack", template: "./public/index.html", }), ], };

再通过 npm run build 编译，但此时报错，BASE_URL is not defined

文章图片

这里BASE_URL需要配置全局变量，要使用下面这个 plugin
DefinePlugin
DefinePlugin 存在于 webpck 的包中，不需要单独安装

const { DefinePlugin } = require("webpack"); module.exports = { // 其它配置省略 plugins: [ new HtmlWebpackPlugin({ // 自定义 index.html 的 title title: "hello webpack", template: "./public/index.html", }), new DefinePlugin({ // 双引号里的内容会被拿出来作为一个变量，所以 ./ 外面还要加一层引号 BASE_URL: "'./'", }), ], };

再次运行 npm run build，index.html 就可以通过模板生成啦

文章图片

copy-webpack-plugin
在上面的 html 页面中引入了一个 favicon.ico，用于展示在网页左上角的图标，这个icon 在 vue/react 项目中是放置在 public 目录下，我们也在 public 目录下放置一个 icon，用于展示。
因为 public 文件下的资源是固定的，直接拷贝到编译后的文件夹引入使用就可以，这里使用 copy-webpack-plugin 来操作。
通过 npm i copy-webpack-plugin -D 安装后，在 webpack.config.js 中配置。

const CopyWebpackPlugin = require("copy-webpack-plugin"); module.exports = { // 其它配置省略 plugins: [ new HtmlWebpackPlugin({ // 自定义 index.html 的 title title: "hello webpack", template: "./public/index.html", }), new DefinePlugin({ // 双引号里的内容会被拿出来作为一个变量，所以 ./ 外面还要加一层引号 BASE_URL: "'./'", }), new CopyWebpackPlugin({ // 用于匹配复制文件的规则 patterns: [ { from: "public", }, ], }), ], };

只配置复制文件来源是不够的，因为HtmlWebpackPlugin已经处理了一次html，会报错index.html文件冲突

文章图片

在上面的 patterns 中需要加上忽略文件的配置

patterns: [ { from: "public", globOptions: { // 忽略的文件如果在from属性配置的文件夹下，需要在文件名前加上 **/ ignore: ["**/index.html"], }, }, ];

再次运行 npm run build，图标就已经被复制到 dist 文件夹下，网页左上角也能成功显示

文章图片

以上通过 clean-webpack-plugin 自动删除编译后文件夹、html-webpack-plugin 配置 html 模板、definePlugin 定义全局变量、copy-webpack-plugin 复制 public 下静态资源，使项目资源处理更为简单。
更多有关webpack的内容可以参考我其它的博文，持续更新中~