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

相关推荐
松涛和鸣15 分钟前
Linux Makefile : From Basic Syntax to Multi-File Project Compilation
linux·运维·服务器·前端·windows·哈希算法
dly_blog19 分钟前
Vue 逻辑复用的多种方案对比!
前端·javascript·vue.js
万少35 分钟前
HarmonyOS6 接入分享,原来也是三分钟的事情
前端·harmonyos
烛阴44 分钟前
C# 正则表达式:量词与锚点——从“.*”到精确匹配
前端·正则表达式·c#
wyzqhhhh1 小时前
京东啊啊啊啊啊
开发语言·前端·javascript
JIngJaneIL1 小时前
基于java+ vue助农电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
想学后端的前端工程师1 小时前
【Java集合框架深度解析:从入门到精通-后端技术栈】
前端·javascript·vue.js
VcB之殇1 小时前
git常用操作合集
前端·git
sbjdhjd2 小时前
开源分享 | 超浪漫 3D 圣诞树立体动画(附零基础使用教程)
3d·青少年编程·开源·html·节日
yinuo2 小时前
前端跨页面通讯终极指南⑧:Cookie 用法全解析
前端