使用html-webpack-plugin插件来启动页面 可将html页面放入内存 以提升页面的加载速度
并且还能自动设置index.html页面中JS文件引入的路径
使用前提:项目中安装了Webpack使用步骤:
步骤一、在项目的根目录下输入cnpm i html-webpack-plugin -D
将html-webpack-plugin插件安装到开发依赖
其作用是根据指定的模板页面在内存中生成相应的HTML页面
步骤二、插件安装之后 修改webpack.config.js的配置文件
在配置文件中导入html-webpack-plugin插件 并配置模板页路径和生成的页面名称即可
const path=require("path") // 导入html-webpack-plugin const htmlWebpackPlugin=require("html-webpack-plugin") module.exports={ entry:path.join(__dirname,"./src/main.js"), output:{ path:path.join(__dirname,"./dist"), filename:"bundle.js" }, // 配置插件节点 plugins:[ // 创建html-webpack-plugin插件 new htmlWebpackPlugin({ // 设置参数 template:path.join(__dirname,"./src/index.html"), // 指定模板页面 以根据指定页面生成内存中的页面 filename:"index.html" // 指定生成的内存中的页面的名称 }) ] }
使用了html-webpack-plugin插件之后 就无需手动处理bundle.js的引用路径了
因为 在生成后的内存中的HTML页面里 已经自动引入了bundle.js的正确路径
总结 - 插件的作用:
1、自动根据指定的页面生成一个在内存中的页面
2、自动在页面中引入打包好的bundle.js
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“浅析html webpack plugin插件的使用教程”评论...
更新动态
2024年05月13日
2024年05月13日
- 暗区突围PC端官网入口 暗区突围国际服官网链接
- 《王国之泪》一周年!塞尔达公主声优晒手绘贺图庆祝
- Tango工作室关闭 玩家上Steam好评轰炸《完美音浪》
- 《女神异闻录》系列去年销量超过500万份 新作开发中
- ABC唱片-《美国西电录音九号测试碟》HD德国版[WAV+CUE]
- 姜克美《霸王别姬HQ》头版限量编号[WAV+CUE]
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[正版CD低速原抓WAV+CUE]
- 解压感十足!这款破坏建筑的游戏现仅59.5元即可入手
- 西班牙一地颁布禁酒令 晚九点半至早八点半禁售
- 吴彦祖发文纪念母亲:每天都想妈妈
- 群星.1989-彩色的年纪-第六届大学城纪念专辑【飞碟】【WAV+CUE】
- 张秀卿.1995-青春【宝丽金】【WAV+CUE】
- 张柏芝.2001-最新形象【环球】【WAV+CUE】
- 惊魂加油站 The Last Stop in Yuma County
- 盟军敢死队 The Ministry of Ungentlemanly Warfare