三、webpack之plugin
Loader是用于特定的模块类型进行转换，Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。
1. CleanWebpackPlugin
前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹，我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin。
安装
yarn add clean-webpack-plugin -D
配置
webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
2. HtmlWebpackPlugin
HtmlWebpackPlugin用于生成 index.html。
安装
yarn add html-webpack-plugin -D
配置
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: 'webpack app demo'
})
]
}
配置完成重新打包后，我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件, 该文件中也自动添加了我们打包的bundle.js文件。
code.png
这个文件是如何生成的呢？
默认情况下是根据ejs的一个模板来生成的，在html-webpack-plugin的源码中，有一个default_index.ejs模块。
2.1 自定义HTML模板
如果我们想在自己的模块中加入一些比较特别的内容，类似于vue-cli的模板，比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示；比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签 <div id="app"></div>。
这个我们需要一个属于自己的index.html模块：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。在配置HtmlWebpackPlugin时，我们可以添加如下配置：
- template：指定我们要使用的模块所在的路径
- title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: 'webpack app demo',
template: "./public/index.html"
})
]
}
但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量。
这是因为在编译template模块时，有一个BASE_URL：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
但是我们并没有设置过这个常量值，所以会出现没有定义的错误。
这个时候我们可以使用DefinePlugin插件。
DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）
配置如下：
webpack.config.js
const { DefinePlugin } = require('webpack');
module.exports = {
plugins: [
new DefinePlugin({
BASE_URL: '"./"'
})
]
}
3. CopyWebpackPlugin
在vue-cli的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。这个复制的功能，我们可以使用CopyWebpackPlugin来完成。
*安装
yarn add copy-webpack-plugin -D
配置
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "public", // 从哪里复制
globOptions: {
// 忽略的文件
ignore: [
"**/index.html",
"**/.DS_Store", // mac自动生成的文件
"**/abc.txt"
]
}
}
]
})
]
}
4. MiniCssExtractPlugin
MiniCssExtractPlugin可以帮助我们将css提取到一个独立的css文件中，该插件需要在webpack4+才可以使用。
首先，我们需要安装 mini-css-extract-plugin：
yarn add mini-css-extract-plugin -D
配置rules和plugins：
image.png
