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

相关推荐
张雨zy33 分钟前
Vue 项目管理数据时,Cookie、Pinia 和 LocalStorage 三种常见的工具的选择
前端·javascript·vue.js
五月君_40 分钟前
Nuxt UI v4.3 发布:原生 AI 富文本编辑器来了,Vue 生态又添一员猛将!
前端·javascript·vue.js·人工智能·ui
!执行1 小时前
遇到 Git 提示大文件无法上传确实让人头疼
前端·github
坚持学习前端日记1 小时前
个人网站从零到盈利的成长策略
前端·程序人生
CamilleZJ1 小时前
eslint+prettier
前端·eslint·工程化·prettier
web小白成长日记2 小时前
深入理解 React 中的 Props:组件通信的桥梁
前端·javascript·react.js
tjswk20082 小时前
在ios上动态插入元素的列表使用:last-child样式可能不能及时生效
前端
小小荧2 小时前
CSS 写 SQL 查询?后端慌了!
前端·sql
小高0072 小时前
🔥3 kB 换 120 ms 阻塞? Axios 还是 fetch?
前端·javascript·面试
千寻girling2 小时前
面试官 : “ Vue 选项式api 和 组合式api 什么区别? “
前端·vue.js·面试