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

相关推荐
222you2 分钟前
vue目录文件夹的作用
前端·javascript·vue.js
月屯4 分钟前
pandoc安装与使用(html、makdown转docx、pdf)
前端·pdf·html·pandoc·转docx、pdf
我爱学习_zwj7 分钟前
Node.js模块化入门指南
前端·node.js
Shirley~~9 分钟前
开源项目PPtist分享
前端·typescript·vue
yanghuashuiyue13 分钟前
TypeScript是JavaScript超集-百度AI灵魂拷问
前端·javascript·typescript
光头程序员17 分钟前
Vite 前端项目 - CSS变量智能提示
前端·css
木易 士心19 分钟前
深入理解 TypeScript 声明文件(.d.ts):类型系统的桥梁
前端·javascript·typescript
抹茶冰淇淋20 分钟前
面对新电脑,前端开发者需要进行哪些初始化配置
前端·github
HIT_Weston21 分钟前
55、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 单/多线程分析(七)
前端·http·gitlab
Watermelo61722 分钟前
如何优雅地导出 VS Code 项目目录结构
前端·javascript·vue.js·vscode·算法·性能优化·node.js