# plugin
## 解释
1. Loader是用于特定的模块类型进行转换
2. Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等
# cleanWebpackPligin 打包时自动清除上次打包的文件
## 安装
`npm install clean-webpack-plugin` -D
## webpack.config.js 中使用
1. 在配置文件中导入
`const { CleanWebpackPlugin } = require('clean-webpack-plugin')`
2. 配置
```
module.exports = {
module: {
},
plugins: [
new CleanWebpackPlugin()
]
}
```
# htmlWebpackPligin 配置入口html，默认模板在 node_modules/html-webpack-plugin 的 default_index.ejs 文件
## 安装
`npm install html-webpack-plugin` -D
## webpack.config.js 中使用
1. 在配置文件中导入
`const HtmlWebpackPlugin = require('html-webpack-plugin')`
2. 在没有指定打包模板下，配置，自动生成
```
module.exports = {
module: {
},
plugins: [
new HtmlWebpackPlugin({
title: '自定义页面title'
})
]
}
```
3. 指定打包的模板
① 在根目录新建文件，如 public/index.html，内容如下，其中的输出方式为 ejs 语法，htmlWebpackPligin 内置了ejs插件
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="<%= BASE_URL %>/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>非常抱歉，禁用JavaScript导致 <%= htmlWebpackPlugin.options.title %> 无法正常工作，请启动！</strong>
</noscript>
<div id="app"></div>
</body>
</html>
```
注意：模板中无需引入打包的js，htmlWebpackPligin 会自动引用
BASE_URL 为一个全局常量，webpack 的 DefinePlugin 插件可以实现
② 在webpack.config.js中配置：
```
const { DefinePlugin} = require('webpack')
module.exports = {
module: {
},
plugins: [
new HtmlWebpackPlugin({
title: '自定义页面title',
template: './public/index.html'
}),
// 定义常量 BASE_URL
new DefinePlugin({
BASE_URL: '"./"'
})
]
}
```
# DefinePlugin 允许在编译时， 配置全局常量，是一个webpack内置的插件，不用安装
## webpack.config.js中的配置
```
module.exports = {
module: {
},
plugins: [
// 定义常量 BASE_URL
new DefinePlugin({
BASE_URL: '"./"' // 注意这里的字符串，外面必须再套一个引号
})
]
}
```
# CopyWebpackPlugin 将文件拷贝到打包文件夹内
## 安装 `npm install copy-webpack-plugin -D`
## 引入 `const CopyWebpackPlugin = require('copy-webpack-plugin')`
## 配置
```
module.exports = {
module: {
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: 'public', // 从 public 目录 复制
// to: 'build', // 复制到哪里，一般省略，就复制到 webpack 配置的打包路径的根目录
globOptions: {
// 忽略不拷贝的文件，注意这里的 **
ignore: [
'**/index.html',
'**/.DS_Store',
'**/a.txt'
],
}
}
]
})
]
}
```