webpack学习(六) -- webpack自动生成html文件并引入js包

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-webpack-plugin能够将html单独抽离出来而且能够进行压缩或者配置

解决过程

下载插件

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

配置

• 引入

在webpack配置文件中引入插件

• 应用插件

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

• 配置插件

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

在咱们本身的html中会有一些dom结构，在插件处理后要保证这些dom还在，因此咱们须要配置插件要抽离的html的模版

若模版中有注释、空格，咱们也能够进行压缩

执行

• 执行webpack命令进行打包

webpack
复制代码

• 结果

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

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

'意外惊喜'(clean-webpack-plugin插件)

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

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

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

下载

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

引入

应用

执行打包

webpack
复制代码

结果

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

结尾

其实这些小插件还有不少配置，这里只是介绍了咱们须要的一些配置，若想进一步了解，这里附上连接 html-webpack-plugin