- 插件 Plugin
- ==========================
- CleanWebpackPlugin 清理输出文件夹
- 作用
- 1、安装
- 2、配置
- CleanWebpackPlugin 清理输出文件夹
-
- HtmlWebpackPlugin 生成Html入口
- 作用
- 1、安装
- 2、配置
- 3、自定义Html模板
- 4、自定义模板数据填充
- DefinePlugin 数据填充(内置)
- 作用
- 1、引入
- 2、配置
- CopyWebpackPlugin 复制文件
- 作用
- 1、安装
- 2、配置
- HtmlWebpackPlugin 生成Html入口
插件 Plugin
loader做不了的事情,webpack某个阶段想做的事情,都是通过插件完成(如自动删除文件)
loader只是处理webpack打包,而插件是在任何webpack生命周期都会起作用。
==========================
CleanWebpackPlugin 清理输出文件夹
作用
每次修改了一些配置,重新打包时,都需要手动删除dist文件夹。
而安装这个插件后,会自动帮我们删除。
1、安装
npm install clean-webpack-plugin -D
2、配置
HtmlWebpackPlugin 生成Html入口
作用
1、安装
npm install html-webpack-plugin -D
2、配置
通过插件代码,套用一些模板生成
3、自定义Html模板
4、自定义模板数据填充
方式一:通过插件自己的变量
方式二:通过DefinePlugin 数据填充插件
上面的代码中,会有一些类似这样的语法<% 变量 %>,这个是EJS模块填充数据的方式。
这个可以通过下面DefinePlugin 数据填充 插件实现。
DefinePlugin 数据填充(内置)
作用
给html模板填充一些变量
1、引入
因为是webpack内置的,所以可以直接解构引入
2、配置
格式是{ Html模板变量名 : “变量名” },如果需要直接写字符串,需要写成” ‘ ‘ “ 双引号内用单引号
CopyWebpackPlugin 复制文件
作用
复制的意思是,不做任何改名、编码等转换,1比1复制过去。
1、安装
npm install copy-webpack-plugin -D
2、配置
to可以不写,不写的话会自动读取插件上下文,找到对应的属性,如下图找到输出的目录