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.打开浏览器控制台,在控制台可看到相应的输出。
打开浏览器控制台,在控制台可看到相应的输出
原文地址:https://www.cnblogs.com/singledogpro/p/12030578.html