前面文章中 体验了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 文件夹没有被删除和重新创建
1_新建hello-txt测试.png
如果在 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 中
2_html-webpack-plugin.png
html-webpack-plugin 中 ejs 文件就是用于生成 html 的模板
3_ejs.png
但比如 vue、react 的入口 index.html 文件中需要添加 id 为 app 或者 root 的 div 标签，使用默认的 html 模板就不合适了，html-webpack-plugin 提供了自定义模板文件的选项。
将 vue 中位于 public 文件夹下 index.html 的模板文件复制过来
4_vue中模板文件.png
在 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
5_BASE_URL.png
这里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 就可以通过模板生成啦
6_definePlugin.png
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文件冲突
7_htmlconflict.png
在上面的 patterns 中需要加上忽略文件的配置
patterns: [
{
from: "public",
globOptions: {
// 忽略的文件如果在from属性配置的文件夹下，需要在文件名前加上 **/
ignore: ["**/index.html"],
},
},
];
再次运行 npm run build，图标就已经被复制到 dist 文件夹下，网页左上角也能成功显示
8_copy-webpack-plugin.png
以上通过 clean-webpack-plugin 自动删除编译后文件夹、html-webpack-plugin 配置 html 模板、definePlugin 定义全局变量、copy-webpack-plugin 复制 public 下静态资源，使项目资源处理更为简单。
更多有关webpack的内容可以参考我其它的博文，持续更新中~
网友评论