html in webpack

痛点：html是我们前端最最基础的也是最接近视图的部分，上文中说到关于css的部分，我们的案例都是要自己创建html文件，然后把打包后的js和css文件手动引入html中。

这样狠繁琐呀，所以本文就是要学习，怎么用webpack实现通过当前的html文件，自动生成一个html文件并把打包后的css和js文件引入。

在webpack配置文件中，我们生成的当前文件名为：

若在名称后面拼上5倍的hash值，在打包后包的名称后就会自动拼出不定的5倍hash值:

可以看到打包后的文件名都带了hash值

然后，我们就要手动的把html中引入的两个文件名都修改成带hash的名字，这样的话，每次打包名字改变，引入就需要修改，很麻烦，也不科学

html-webpack-plugin可以将html单独抽离出来并且可以进行压缩或者配置

npm install html-webpack-plugin -D复制代码

在webpack配置文件中引入插件

在配置文件中的plugins插件数组里加入该插件

在插件里配置插件单独抽离出来的html的名称

在我们自己的html中会有一些dom结构，在插件处理后要保证这些dom还在，所以我们需要配置插件要抽离的html的模版

若模版中有注释、空格，我们也可以进行压缩

webpack复制代码

dist打包文件中多出了index.html文件

index.html文件中包好了模版html中的所有内容，还多出了打包后的css和js文件

当我以为这个插件学习完了，没啥问题的时候，突然发现，dist文件里，为什么我每次打包后，之前的打包文件还存在文件夹中，这是很不好的体验，也让人分不清哪个是新打包的文件

赶紧寻找解决办法啊，这时候我又学习到了另一个插件，就是clean-webpack-plugin插件(不得不感叹，插件真的是神奇，没有各种插件，我们的开发简直困难重重呀)。

这个插件的作用就是清除上一次打包好的文件

npm install clean-webpack-plugin -D复制代码

webpack复制代码

可以看到dist文件里只有当次打包好的文件了，之前的都删除了

其实这些小插件还有很多配置，这里只是介绍了我们需要的一些配置，若想进一步了解，这里附上链接