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

相关推荐
HelloReader3 分钟前
Nuxt 4.2 + Tauri 2 接入指南把 Vue 元框架“静态化”后装进桌面/移动端
前端
SuperEugene5 分钟前
手把手写几种常用工具函数:深拷贝、去重、扁平化
前端·javascript·面试
大时光6 分钟前
疯狂点赞效果
前端
小岛前端39 分钟前
前端真神器!RD280U 让我写码效率暴涨!
前端·程序员
hqk1 小时前
鸿蒙项目实战:手把手带你从零架构 WanAndroid 鸿蒙版
前端·架构·harmonyos
大时光1 小时前
粒子形成文字
前端
Kayshen1 小时前
春节期间我们开源了一个 AI-Native 的矢量设计工具,对标 Pencil.dev,让 AI Agent 直接画 UI
前端·aigc·agent
没想好d1 小时前
通用管理后台组件库-6-头部导航组件
前端
linux_cfan1 小时前
打造智慧校园视听新基建:高校与在线教育平台 Web 视频播放器选型指南 (2026版)
前端·学习·音视频·教育电商
JYeontu1 小时前
实现一个超萌的柯基交互输入框
前端