从0到1学习Webpack5 （二）：webpack插件

Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。我们按需安装插件，完成我们需要的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
在上一章webpack基本配置中，打包后需要我们手动把打包的内容引入到html中去。其实我们可以通过html-webpack-plugin插件实现自动生成html文件和引入js的功能。下面，对我们的打包功能做个优化。

一、使用html-webpack-plugin插件

1. 安装html-webpack-plugin

npm install html-webpack-plugin --save-dev

2. 配置html-webpack-plugin

webpack插件的使用需要先引入，然后在plugins选项中实例化调用，代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

清空dist目录，然后使用npx webpack命令打包，我们会发现dist目录里自动生成了一个index.html。
有时我们想要自定义html, 我们可以通过template参数传入我们自定义的html路径作为模板。代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html', inject: 'body' })],
  mode: 'development'
};

其中，plugins选项是一个数组，里面是使用的各种插件。我们实例化了html-webpack-plugin插件，并且传入了三个参数template, filename,inject。
template: 我们的html模板，可以根据自己需要创建、修改
filename: html-webpack-plugin生成html文件的名称
inject: 打包生成的js文件，在html文件哪个位置引入

二、清除上一次打包内容

前面的打包中，我们发现，每次打包都要手动清除上一次的dist文件。事实上，这个清除功能我们也可以通过插件解决。
在webpack4中，一般使用clean-webpack-plugin插件来清除上一次打包的内容。
webpack5集成了clean插件，我们只需要在输出中配置clean: true即可。
代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true
  },
  plugins: [new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html', inject: 'body' })],
  mode: 'development'
};

三、小结

1. webpack插件的使用需要先引入，然后在plugins选项中实例化调用
2. html-webpack-plugin能够以某个 html 作为模板，且能指定 js 引入位置，以及输出html文件名
3. webpack5 集成了 clean 插件，直接在输出中加入 clean: true 即可在每次打包的时候清除上一次打包的内容。

参考资料：
webpack官方文档
千锋陆荣涛最新前端webpack5全套教程