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

相关推荐
桂月二二16 分钟前
Vue3服务端渲染深度实战:SSR架构优化与企业级应用
前端·vue.js·架构
萌萌哒草头将军16 分钟前
🚀🚀🚀 这六个事半功倍的 Pinia 库,你一定要知道!
前端·javascript·vue.js
_一条咸鱼_17 分钟前
深入剖析 Vue 状态管理模块原理(七)
前端·javascript·面试
rocky19127 分钟前
谷歌浏览器插件 录制动态 DOM 元素
前端
谁还不是一个打工人30 分钟前
css解决边框四个角有颜色
前端·css
海晨忆1 小时前
【Vue】v-if和v-show的区别
前端·javascript·vue.js·v-show·v-if
1024小神2 小时前
在GitHub action中使用添加项目中配置文件的值为环境变量
前端·javascript
齐尹秦2 小时前
CSS 列表样式学习笔记
前端
Mnxj2 小时前
渐变边框设计
前端
用户7678797737322 小时前
由Umi升级到Next方案
前端·next.js