打包HTML

结合之前的webpack打包 ,对HTML进行相对应的打包

1.在浏览器打开npm搜索 html---webpack---插件

2.下划找到lnstall复制webpack5里的第一句到终端

3.下滑找到用法配置脚本语言

3.1 复制下图代码到之前的webpack.config.js脚本里放在开头的位置

3.2 复制下图代码到之前的webpack.config.js脚本里的output:{......}内容下

4.创建一个文件夹,再在文件夹里面创建一个html文件书写内容

5.修改下面代码把里面的地址换成自己创建的html地址

plugins: [

new HtmlWebpackPlugin({template: 'html/xl.html'})

]

6.在终端运行npm run texs (test为package.json内scripts内的属性名(该属性名可修改))

相关推荐
.又是新的一天.3 分钟前
【前端Web开发HTML5+CSS3+移动web视频教程】02 html - 列表、表格、表单
前端·html·html5
程序员鱼皮3 分钟前
你的 IP 归属地,是咋被挖出来的?
前端·后端·计算机·程序员·互联网·编程经验
小酒星小杜5 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统 - 总结篇
前端·vue.js·人工智能
燕山石头9 分钟前
jeecg统一异常处理根据不同模块返回指定响应信息
前端
PyHaVolask22 分钟前
CSRF跨站请求伪造
android·前端·csrf
程序员海军32 分钟前
我的2025:做项目、跑副业、见人、奔波、搬家、维权、再回上海
前端·程序员·年终总结
我来整一篇36 分钟前
[Razor] ASP.NET Core MVC 前端组件快速使用总结
前端·asp.net·mvc
P7Dreamer1 小时前
微信小程序处理Range分片视频播放问题:前端调试全记录
前端·微信小程序
RedHeartWWW1 小时前
初识next-auth,和在实际应用中的几个基本场景(本文以v5为例,v4和v5的差别主要是在个别显式配置和api,有兴趣的同学可以看官网教程学习)
前端·next.js
C_心欲无痕1 小时前
前端页面中,如何让用户回到上次阅读的位置
前端