插件 Plugin

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

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

CleanWebpackPlugin 清理输出文件夹

作用

每次修改了一些配置，重新打包时，都需要手动删除dist文件夹。
而安装这个插件后，会自动帮我们删除。

1、安装

npm install clean-webpack-plugin -D

2、配置

HtmlWebpackPlugin 生成Html入口

作用

• 我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的
• 在进行项目部署时，必然也是需要有对应的入口文件index.html

• 所以我们也需要对index.html进行打包处理

  1、安装

  npm install html-webpack-plugin -D

  2、配置

  
  通过插件代码，套用一些模板生成
  

• 这个文件是如何生成的?

  • 默认情况下是根据ejs的一个模板来生成的;
  • 在html-webpack-plugin的源码中，有一个default_index.ejs模块

    3、自定义Html模板

• 如果我们想在自己的模块中加入一些比较特别的内容

  • 比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示
  • 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签<div id="app"></div>

4、自定义模板数据填充

方式一：通过插件自己的变量



方式二：通过DefinePlugin 数据填充插件

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

DefinePlugin 数据填充（内置）

作用

给html模板填充一些变量

1、引入

因为是webpack内置的，所以可以直接解构引入

2、配置

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

CopyWebpackPlugin 复制文件

作用

• 在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。
  • 这个复制的功能，我们可以使用CopyWebpackPlugin来完成;
• 还有一些静态资源，例如图片、引用的第三方已经打包好的代码资源

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

1、安装

npm install copy-webpack-plugin -D

2、配置

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