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

相关推荐
float_六七7 分钟前
行级与块级元素:核心区别与应用场景
开发语言·前端·javascript
毕设十刻20 分钟前
基于Vue的家教预约系统7fisz(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
前端无涯22 分钟前
深度解析:fetch 与 Promise 结合实战及面试重点
前端·javascript
风舞红枫25 分钟前
node代理vue打包后的文件,实现本地测试
前端·javascript·vue.js·node.js
helloCat25 分钟前
记录CI/CD自动化上传AppGallery遇到的坑
android·前端·api
Yanni4Night28 分钟前
使用URLPattern API构建自己的路由器 🛣️
前端·javascript
web守墓人34 分钟前
【前端】garn:使用go实现一款类似yarn的依赖管理器
前端
全栈陈序员40 分钟前
Vue 实例挂载的过程是怎样的?
前端·javascript·vue.js·学习·前端框架
Bruce_Liuxiaowei1 小时前
一键清理Chrome浏览器缓存:批处理与PowerShell双脚本实现
前端·chrome·缓存
怒放的生命19911 小时前
Vue 2 vs Vue 3对比 编译原理不同深度解析
前端·javascript·vue.js