打包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内的属性名(该属性名可修改))

相关推荐
gaozhiyong081331 分钟前
深度技术拆解:豆包2 Pro vs Gemini 3—国产工程派与海外原生派的巅峰对决
前端·spring boot·mysql
JosieBook41 分钟前
【C#】C# 访问修饰符与类修饰符总结大全
前端·javascript·c#
遨游建站1 小时前
谷歌SEO之网站内部优化策略
前端·搜索引擎
华洛1 小时前
聊聊我逃离前端开发前的思考
前端·javascript·vue.js
小码哥_常1 小时前
解锁Android权限申请新姿势:与前置说明弹窗共舞
前端
紫_龙1 小时前
最新版vue3+TypeScript开发入门到实战教程之路由详解三
前端·javascript·typescript
-SOLO-1 小时前
使用Cursor操控正在打开的Chrome
前端·chrome
chiwei_hua1 小时前
如何在 Blazor Web 前端中使用 C# 进行数据交互?
前端·c#·交互
jacklood2 小时前
使用STM32的迪文屏控制使用参考方式
前端·javascript·stm32
KevinCyao2 小时前
Go短信营销接口示例代码:Golang高并发调用营销短信接口的实现方案与代码分享
android·前端·网络·golang·前端框架