插件机制
loader专注实现资源模块的加载
plugin用来解决项目中除了资源加载以外其他的自动化工作，比如清理上一次打包输出的文件、拷贝不需要参与打包的静态文件到输出目录、压缩输出代码
自动清除输出目录的插件
每次使用webpack打包的时候清除上一次打包输出的文件
安装
`yarn add clean-webpack-plugin --dev`
打开配置文件，导入clean-webpack-plugin插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
插件的使用需要添加plugins属性，在该属性中通过new一个对象的方式使用插件
```
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'none',
entry: "./src/index.js", //入口文件
output: {
filename: "bundle.js", //文件名称
path: path.join(__dirname, "output"), //输出目录
publicPath: 'output/' //指定文件读取目录
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /.(jpe?g|png)$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024 //10KB
}
}
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attributes: {
list: [
{
tag: 'a',
attribute: 'href',
type: 'src'
},
{
tag: 'img',
attribute: 'data-srcset',
type: 'srcset',
}
]
}
}
}
}
]
},
plugins: [
new CleanWebpackPlugin() //这里使用自动清除插件
]
}
```
生成HTML的插件html-webpack-plugin
安装
yarn add html-webpack-plugin --dev
引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
在plugins数组下实例化对象
plugins: [
new CleanWebpackPlugin(), //这里使用自动清除插件
new HtmlWebpackPlugin(), //默认生成index.html
]
到这一步执行yarn webpack就可以自动生成html文件到输出目录了
但是生成的html文件还有点问题，在引入bundle.js的script标签那里src路径多了output，这是因为之前在output对象下添加了publicPath属性，把它去掉就可以了。
如果对html文件有特殊的要求，可以在实例化HtmlWebpackPlugin对象的时候传入一个对象，支持修改的属性可在npm或者GitHub查
```javascript
new HtmlWebpackPlugin({
title: 'Webpack Plugin sample',
meta: {
viewport: 'width=device-width'
}
})
```
如果要修改的属性比较多，可以指定一个html模板
```javascript
new HtmlWebpackPlugin({
title: 'Webpack Plugin sample',
meta: {
viewport: 'width=device-width'
},
template: './src/index.html'
})
```
index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack</title>
</head>
<body>
<div class="container">
<h1><%= htmlWebpackPlugin.options.title %></h1>
</div>
</body>
</html>
```
这里的h1标签使用了EJS，需要去掉html-loader的使用才能生效，否则生成的html文件将会原样输出这段代码
