第三章自动引入资源

">1. 什么是插件？
2. 使用 htmlWebpackPlugin
3. 清理 dist 目录

到目前为止，都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。

1. 什么是插件？

webpack 就像一条流水线，它需要进行一系列的处理流程以后才能将源文件（入口文件）转换成最后的结果，但源文件还可能依赖于其他的 js、css … 等其他模块。然后 webpack 会将这些依赖关系都记录下来，交给 webpack 的编译器，webpack 的编译器经过加工以后会生成目标文件，如：js、css文件，webpack 编译的过程需要应用一些工具来帮忙，这些工具可以帮助 webpack 来执行一些特定的任务，如：打包优化、资源管理等。这些工具即所谓的 plugins (插件)

插件是 webpack 的核心功能。插件可以用于执行一些特定的任务，包括：打包优化，资源管理，注入环境变量等。Webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

webpack 插件官网：https://www.webpackjs.com/plugins/

2. 使用 htmlWebpackPlugin

实现将项目中的 inedx.html 文件打包出去，且打包出去的 index.html 文件中已经引入好了打包后的 js 文件，无需我们手动引入

① 在项目的根目录下安装插件

npm i html-webpack-plugin -D

② 配置 webpack.config.js

引入插件
在 plugins 属性中将插件实例化 ```javascript const path = require(‘path’) // 1. 引入插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports = { entry: ‘./src/js/index.js’,

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
},
mode: 'development',
plugins: [
    // 2. 将插件实例化
    new HtmlWebpackPlugin()
]

}

重新打包后，dist 目录中会出现一个 index.html 文件，该文件的 <head> 标签中会有插件生成的 script 标签，里面已经引入好了 打包后的 js 文件，右击该文件复制地址进入浏览器可以观察到效果<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/2158318/1642567007868-381e3599-5e71-41df-8542-ac4f28dbd525.png#clientId=u61c6ec40-b78d-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=130&id=udb517157&margin=%5Bobject%20Object%5D&name=image.png&originHeight=130&originWidth=191&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10313&status=done&style=none&taskId=uf364576d-0652-4d52-82e2-5f99d2256ec&title=&width=191)
```javascript
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="bundle.js"></script>

注：此时 dist/index.html 与先前的 index.html 并没有关系，HtmlWebpackPlugin 会默认生成它自己的 index.html 文件，并且所有的 bundle（bundle.js）会自动添加到 html 中

继续配置 webpack.config.js，配置完后就可以联系两个 html 文件了

        new HtmlWebpackPlugin({
            // 打包生成 html 文件的模板
            template: './src/index.html',
            // 打包生成 html 文件的名称,默认为 index.html
            filename: 'app.html',
            // 设置所有资源文件注入模板的位置
            // 可以设置的值 true|'head'|'body'|false，默认值为 true
            inject: 'body'
        })

打包完后 dist 目录中又生成了一个 app.html 文件，且文件里自动引用的 bundle.js也从

迁移到了里

<body>
<script defer src="bundle.js"></script>
</body>

3. 清理 dist 目录

当我们安装 htmlWebpackPlugin 插件后且指定输出文件的文件名为 app.html。那么以前打包生成的 index.html 就不需要了，但是它依然存在于 dist 文件夹中，所以我们需要把它清理掉，只需要在 webpack.config.js 文件中的 output 属性中配置 clean: true 就可以了，它会自动的清理掉过去打包遗留的但现在不需要的文件

    // 设置项目打包的出口文件名
    output: {
        // 指定输出文件的文件名
        filename: 'bundle.js',
        // 指定文件的输出路径(只能是绝对路径)
        path: path.resolve(__dirname, './dist'),
        // 清除以往打包，但这一次打包不需要的文件
        clean: true
    },

检查 /dist 文件夹。现在只会看到构建后生成的文件，而没有旧文件！

第三章 自动引入资源

1. 什么是插件？

2. 使用 htmlWebpackPlugin