《前端》使用webpack+vue从零开始打造前端项目(2020最新版)四--插件的使用--bilibili-2021年1月27日

九、插件

在某个时间点，自动执行的处理程序

（一）html-webpack-plugin

打包结束时，在dist目录下自动生成index.html 文件，并把打包好的js文件引入到html中。

1、安装：npm install -D html-webpack-plugin

2、配置插件：

（1）在webpack.config.js中引入插件：

const htmlWebpackPlugin = require('html-webpack-plugin')

（2）在plugins:[],中添加配置内容：new HtmlWebpackPlugin(),

再次打包之后，只要npm run build，index.html 就自动打包到dist中。

（3）但是自动生成index.html时，里面的代码内容没有加载进文件中，如下两张图：