我们希望可以把js自动插入到写好的html模版中, 并打包
安装插件 html-webpack-plugin
配置说明: https://github.com/jantimon/html-webpack-plugin
yarn add html-webpack-plugin -D

webpack配置中引入
image.png

在src目录下新建个模版html文件
image.png

配置 html-webpack-plugin 插件
image.png

运行 npm run build
image.png
可以看到已经生成了两个文件, 不过是放在内存中

打开3000端口的页面
image.png
确实已经生成引入bundle.js文件的html文件

html插件打包配置

先将模式换为 production , 在插件配置中添加 minify 配置
image.png

运行 npm run build 即可在dist 文件夹下看到打包压缩过的html和js文件
image.png