插件 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