webpack4.x - 3 插件html-webpack-plugin

背景

上一篇，我们已经学会了如何简化webpack打包的流程了。但是无论打包过程怎么变，打包之后的js都需要手动的引入到html文件里头，那么当我们改下打包生成的文件名之后，就需要再次手动的修改html里头的引用了，显然这个有诸多的不便利。eg:

有一种情况，有时候为了更好的 cache 处理，文件名还带着 hash，例如下面这样：

main.9046fe2bf8166cbe16d7.js

这个 hash 是文件的 md5 值，随着文件的内容而变化，你总不能每变化一次，就改一下 index.html 文件吧？

因此为了解决html和js引用之间的问题，我们引入了html-webpack-plugin，同时这个的引入也为之后的热更新做了技术铺垫。

安装html-webpack-plugin

局部安装：

npm install html-webpack-plugin

成功安装的日志：

+ html-webpack-plugin@4.3.0
added 74 packages from 141 contributors in 9.685s

修改webpack.config.js文件：

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

 
module.exports = {
    entr