插件 Plugin

loader做不了的事情,webpack某个阶段想做的事情,都是通过插件完成(如自动删除文件)

loader只是处理webpack打包,而插件是在任何webpack生命周期都会起作用。

image.png

==========================

CleanWebpackPlugin 清理输出文件夹

作用

每次修改了一些配置,重新打包时,都需要手动删除dist文件夹。

而安装这个插件后,会自动帮我们删除。

1、安装

  1. npm install clean-webpack-plugin -D

2、配置

image.png

HtmlWebpackPlugin 生成Html入口

作用

image.png

1、安装

  1. npm install html-webpack-plugin -D

2、配置

image.png
通过插件代码,套用一些模板生成
image.png

image.png

3、自定义Html模板

image.png

image.png

4、自定义模板数据填充

方式一:通过插件自己的变量
image.png
image.png
image.png

方式二:通过DefinePlugin 数据填充插件
image.png
上面的代码中,会有一些类似这样的语法<% 变量 %>,这个是EJS模块填充数据的方式。
这个可以通过下面DefinePlugin 数据填充 插件实现。

DefinePlugin 数据填充(内置)

作用

给html模板填充一些变量

1、引入

因为是webpack内置的,所以可以直接解构引入
image.png

2、配置

image.png
格式是{ Html模板变量名 : “变量名” },如果需要直接写字符串,需要写成” ‘ ‘ “ 双引号内用单引号
image.png
image.png

CopyWebpackPlugin 复制文件

作用

image.png
复制的意思是,不做任何改名、编码等转换,1比1复制过去。

1、安装

  1. npm install copy-webpack-plugin -D

2、配置

image.png
to可以不写,不写的话会自动读取插件上下文,找到对应的属性,如下图找到输出的目录
image.png