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

相关推荐
zhengxianyi51512 分钟前
vue-cli build, vite build 生产部署刷新或弹窗404,页面空白修复方法
前端·javascript·vue.js·nginx·生产部署
Filotimo_15 分钟前
前端项目打包部署完整流程
前端
Savvy..16 分钟前
Day15 Talis 前端
前端
恋爱绝缘体128 分钟前
Vue.js 组件 - 自定义事件【1】
前端·javascript·vue.js
梦65031 分钟前
JavaScript ES5 + ES6+ 字符串 (String) 所有方法大全
前端·javascript·es6
馨谙39 分钟前
面试题----用户,组,su,su-,sudo,sudo-,nologin shell
java·前端·数据库
王同学 学出来1 小时前
React案例实操(二)
前端·react.js·前端框架
weixin_427771611 小时前
Vite 与 Webpack 模块解析差异
前端·webpack·node.js
永远是我的最爱1 小时前
基于ASP.NET的图书管理系统的设计与实现
前端·后端·sql·visual studio
广州华水科技1 小时前
单北斗GNSS技术在变形监测中的应用及其位移监测优势解析
前端