webpack插件之htmlWebpackPlugin
由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加载顺序,而只要在index.html内使用<script>标签
引入bundle.js即可。
![在index.html内使用引入bundle.js 在index.html内使用引入bundle.js](./images/1576128330556.png)
开发阶段,index.html在根目录,script引入好像也没什么问题。
![index.html在根目录 index.html在根目录](./images/1576128679890.png)
但在真实发布项目时,发布的内容js文件都在dist文件夹内。但dist文件夹中现在没有有index.html文件,怎么引入js文件? 那么打包js等文件好像毫无用处了。
现在我们的需求是
1.将index.html放到dist文件夹内
2.由于index.html的路径发生改变了,所以引入的路径也要做出的相应改变
![.将index.html放到dist文件夹内并修改路径 .将index.html放到dist文件夹内并修改路径](./images/1576129022225.png)
这些修改都要手动操作,手动操作难免出错,这个时候我们就需要一个插件..
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属性 引用html-webpack-plugin插件,并添加plugins属性](./images/1576135321772.png)
3.运行npm run build指令,最后程序在dist文件夹自动生成一个index.html文件,此时无需我们再手动更改index.html的位置和引入js脚本.
![dist文件夹自动生成一个index.html dist文件夹自动生成一个index.html](./images/1576135696377.png)
![自动引入打包好的js文件 自动引入打包好的js文件](./images/1576135721604.png)
4.由于我们使用webpack与vue协同开发,body体还需要一个div容器,用于绑定和挂载vue的元素,此时需要一个模板index.htm来生成。即dist文件夹下index.html需要根目录的index.html生成。修改根目录的index.html,并且给webpack.config.js下的htmlWebpackPlugin添加一个模板参数。
![修改根目录的index.html 修改根目录的index.html](./images/1576136527670.png)
![给webpack.config.js下的htmlWebpackPlugin添加一个模板参数 给webpack.config.js下的htmlWebpackPlugin添加一个模板参数](./images/1576136442617.png)
5.运行npm run build指令,最后程序在dist文件夹自动生成一个index.html文件
![运行npm run build指令 运行npm run build指令](./images/1576136651319.png)
![npm run build npm run build](./images/1576136601280.png)
6.打开浏览器控制台,在控制台可看到相应的输出。
![打开浏览器控制台,在控制台可看到相应的输出 打开浏览器控制台,在控制台可看到相应的输出](./images/1576137015367.png)