02-plugins
plugin 可以在webpack运行到某个阶段的时候,帮你做一些事情,类似于生命周期的概念。
在之前我们使用loader的时候,我们打包后还需要自己手动在打包后的文件夹中创建一个index.html文件,并且这个文件中引入打包后的js,非常麻烦,所以就有了下面这个插件。
一、HtmlWebpackPlugin
![](https://img2020.cnblogs.com/blog/2221918/202102/2221918-20210213202021589-1110742295.png)
使用:
1)在webpack.config.js中引入
![](https://img2020.cnblogs.com/blog/2221918/202102/2221918-20210213203237361-1082739850.png)
2)设置标题需要在自己的html模板中的title中写入ejs的语法
loader都是放在module对象中的,与module平级的是plugins,放入各种插件,下面是htmlWebpackPlugin插件配置
还有一些相关配置:
二、clean-webpack-plugin 会在每次打包后能把前一次打包生成的目录给删掉
![](https://img2020.cnblogs.com/blog/2221918/202102/2221918-20210213202106513-1839443114.png)
使用:
1) 在webpack.config.js中引入:
2)在plugins中去添加配置
![](https://img2020.cnblogs.com/blog/2221918/202102/2221918-20210213205145374-246553238.png)
三、mini-css-extract-plugin 把打包后原来生成的注入到html中的style标签的样式抽出去打包成一个css文件,引入到打包后的html中
安装:
npm install --save-dev mini-css-extract-plugin
使用:
1)在配置文件中引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
2)改变module中css的配置,把style-loader替换为 MiniCssExtractPlugin.loader
![](https://img2020.cnblogs.com/blog/2221918/202102/2221918-20210213211132834-689785782.png)
3.在plugins中配置:
运行后:就可以看到不再是原来的各种style标签里去写入样式了,而是外链了一个css文件