webpack插件之htmlWebpackPlugin

webpack插件之htmlWebpackPlugin

webpack插件 自动化 htmlWebpackPlugin 

由于webpack已经帮我们处理好js之间的依赖关系，现在我们可以忽略js的加载顺序，而只要在index.html内使用<script>标签引入bundle.js即可。

在index.html内使用引入bundle.js

开发阶段，index.html在根目录，script引入好像也没什么问题。

index.html在根目录

但在真实发布项目时，发布的内容js文件都在dist文件夹内。但dist文件夹中现在没有有index.html文件，怎么引入js文件? 那么打包js等文件好像毫无用处了。

现在我们的需求是

1.将index.html放到dist文件夹内

2.由于index.html的路径发生改变了，所以引入的路径也要做出的相应改变

.将index.html放到dist文件夹内并修改路径

这些修改都要手动操作，手动操作难免出错，这个时候我们就需要一个插件..

htmlWebpackPlugin

HtmlWebpackPlugin插件功能:

口在指定路径自动生成一个index.html文件（可指定模板生成）

口将打包好的js文件，自动通过script标签插入到body中

如果一个插件是webpack自带的，这时仅需导入即可；如果不是自带的，那就需要安装，然后再导入。

为了减少webpack的包体大小，大部分插件都不是webpack自带，需要自行安装。

htmlWebpackPlugin使用步骤

1.安装htmlWebpackPlugin指令

npm i html-webpack-plugin --save-dev

2.修改webpack.config.js配置，先引用html-webpack-plugin插件，并添加plugins属性

引用html-webpack-plugin插件，并添加plugins属性

3.运行npm run build指令，最后程序在dist文件夹自动生成一个index.html文件，此时无需我们再手动更改index.html的位置和引入js脚本.

dist文件夹自动生成一个index.html

自动引入打包好的js文件

4.由于我们使用webpack与vue协同开发，body体还需要一个div容器，用于绑定和挂载vue的元素，此时需要一个模板index.htm来生成。即dist文件夹下index.html需要根目录的index.html生成。修改根目录的index.html，并且给webpack.config.js下的htmlWebpackPlugin添加一个模板参数。

修改根目录的index.html

给webpack.config.js下的htmlWebpackPlugin添加一个模板参数

5.运行npm run build指令，最后程序在dist文件夹自动生成一个index.html文件

运行npm run build指令

npm run build

6.打开浏览器控制台，在控制台可看到相应的输出。

打开浏览器控制台，在控制台可看到相应的输出