webpack4.0(三)--动态生成html
2024-10-05 09:52:02
webpack4.0--动态生成html
前言:
webpack-dev-server实现了自动编译刷新浏览器,让编译出来的bundle.js托关于服务器根路径(电脑内存)中去。使用--contentBase
指令指定启动目录(物理磁盘中的页面路径),还需要修改此页面中script
标签的src
属性(指向url根路径,托管路径),麻烦。除了解决此问题,还需要实现页面也放到内存中,则可以借助于一个webpack插件:html-webpack-plugin,配置启动页面。
1、安装:
全局:
npm i html-webpack-plugin -g
再项目根目录执行:
npm i html-webpack-plugin -D
2、配置
增加webpack配置文件配置(webpack.config.js)
var HtmlWebpackPlugin = require('html-webpack-piugin');//导入插件
//配置插件的节点
plugins:[
//自动生成html,从src到dist的过程。。
new HtmlWebpackPlugin({
template:'src/index.html',//以src下面的index.html为模板去创建新的html文件
filename:'index.html',//打包好后,新建的html名字为index.html
}),
]
效果:
1、运行webpack --config build/webpack.conf.js --mode production,不需要手动在dist里面手动建html文件 运行直接生成,也不需要手动处理bundle.js的引用了(托管于根路径页面需要修改引用路径)html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的bundle.js的
<script></script>
。 2、也可以在package.json文件里面,使用scripts字段自定义脚本命令。 --------- "build": "webpack --config build/webpack.conf.js --mode production"
dist目录里面自动生成HTML文件以及js文件,html文件也自动注入了js文件,不需要我们手动完成。
3、更多配置
在实际的项目中,需要自定义一些 html-webpack-plugin
的配置, 像指定生成目录和文件, 使用指定模版生成文件, 这就更改默认配置来实现。
总结
使用 html-webpack-plugin 之后,我们不需要手动处理bundle.js的引用路径了,因为这个插件,已经帮我们自动创建了一个合适的script,并且引用了正确的路径,这解决了很多我们一不小心犯的小错误。
最新文章
- [已解决]Teamviewer VPN 连接上,但无法ping
- JavaScript数据类型 typeof, null, 和 undefined
- 回调函数透彻理解Java
- Linux内核【链表】整理笔记(1)
- Spring的Bean之Bean的基本概念
- 结果集(result set)解释与用法
- 分享Kali Linux 2016.2最新镜像201609
- 星外虚拟主机跨web目录文件读取漏洞
- “ArcGIS数据应用和地图打印输出
- C#简单实现发送手机短信
- 解决UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(128
- iOS获取ipa素材、提取ipa包资源文件
- 数据库【mongodb篇】基本命令学习笔记
- geth搭建私有网络
- Linux之文件(目录)默认权限、特殊权限与隐藏权限
- 适用于 Windows 7 SP1、Windows Server 2008 R2 SP1 和 Windows Server 2008 SP2 的 .NET Framework 4.5.2 仅安全更新说明:2017 年 9 月 12 日
- MBR详解
- AngularJS初始(一)
- python使用SMTP发送qq/sina邮件
- LightOJ - 1396 :Palindromic Numbers (III)(逐位确定法)
热门文章
- 关闭redis持久化功能
- 数据分析之路 第一篇 numpy
- 创建OData Service(基于ASP.NET 4.6.1, EF 6),Part I:Project initialize
- IDEA+SpringBoot+Mybatis+maven分布式项目框架的搭建
- Java IO入门
- ReadWriteLock: 读写锁
- Vue过渡动画运用transition
- An end-to-end TextSpotter with Explicit Alignment and Attention
- Maven入门【小白千万别点进】
- 词袋模型(BOW,bag of words)和词向量模型(Word Embedding)概念介绍