一、什么是插件

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

插件是 Webpack 的核心功能，可以用于执行一些特定的任务，包括打包优化、资源管理、注入环境变量等。

二、使用 HtmlWebpackPlugin

安装 html-webpack-plugin 插件

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

webpack.config.js

// 1. 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, './dist')
    },
    // 2. 使用
    plugins: [new HtmlWebpackPlugin()]    // 实例化 html-webpack-plugin 插件
}

打包：npx webpack

打包生成的 dist 目录中的 index.html 如下：
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="bundle.js"></script>
  </head>
  <body>
  </body>
</html>
```
打包后的 index.html 与 src 目录中的 index.html 看起来没有关系，因为 HtmlWebpackPlugin 会默认生成它自己的 index.html，并且所有的 bundle（bundle.js）会自动引入到 html 中。

给插件传入配置对象

// 1. 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, './dist')
    },
    // 2. 使用
    plugins: [
        // 实例化 html-webpack-plugin 插件
        new HtmlWebpackPlugin({          // 配置对象
            template: './index.html',    // 以 index.html 为模板进行打包
            filename: 'app.html',        // 打包生成的文件名称，默认为 index.html
            // 设置所有资源文件注入模板的位置，可选值：true | 'head' | 'body' | false，默认值为 true
            inject: 'body'
        })
    ]
}

再次打包

dist 目录下新生成了 app.html，内容如下：

<!DOCTYPE html>
<html lang="en">
<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">
    <title>02-自动引入资源</title>
</head>
<body>
    <h1>哈哈哈</h1>
    <script defer src="bundle.js"></script></body>
</html>

这次打包应用到了我们的模板文件 index.html , 并且生成了新的文件 app.html , 文件里自动引用的 bundle.js 也从 <header> 迁移到了 <body> 中。

注意：在 src 的 index.html 中，不用手动引入 js 文件，因为打包后的 html 中会自动引入打包后的 js 文件。

三、清理 dist 目录

Webpack 不会自动清理 dist 目录中上一次的打包结果，一旦打包次数变多，dist 目录中就会存在很多过去的文件。使用 output.clean 配置项，在每次打包时，可以将 dist 目录中上一次生成的文件清除，从而只留下最新的打包后的文件。

module.exports = {
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, './dist'),
        clean: true    // 打包前清理 dist 目录
    },
}

03. 自动引入资源

一、什么是插件

二、使用 HtmlWebpackPlugin

三、清理 dist 目录