webpack5打包单个html文件以及打包多个html文件
程序员文章站
2022-05-30 18:17:11
...
打包html方法
- 使用插件(plugins)对HTML文件进行处理(html-webpack-plugin)
- 下载安装 npm i html-webpack-plugin -D
- 引入插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
- 使用插件
plugins: [
// 调用插件
new HtmlWebpackPlugin({
//创建一个新的html文件,自动引入打包输出的所有资源(js/css)
template:'./src/index.html',
//文件位置与名称
filename:'./html/index.html',
//指定引入js文件
chunks:['index'],
//压缩处理
minify:{
//压缩空格
collapseWhitespace:true,
//移出注释
removeComments:true
}
})
]
打包多个html
```javascript
* plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'./html/index.html',
chunks:['index'],
minify:{
collapseWhitespace:true,
removeComments:true
}
}),
new HtmlWebpackPlugin({
template:'./src/about.html',
filename:'./html/about.html',
chunks:['about'],
minify:{
collapseWhitespace:true,
removeComments:true
}
}),
]
上一篇: HBY火币源系统案例开发
推荐阅读
-
vue-cli打包后本地运行dist文件中的index.html操作
-
解决vue 项目使用webpack打包后,直接打开dist文件夹下的index.html页面空白的问题
-
vue文件打包之后打开index.html发现一片空白
-
VUE 打包后访问index.html空白页面问题和找不到静态文件问题
-
vue-cli打包后打开后index.html 文件白屏问题
-
vue打包之后的dist文件里的index.html,打开显示空白,并且报错
-
webpack5打包单个html文件以及打包多个html文件
-
vue-cli打包之后的dist文件无法运行index.html
-
PHP实现单文件上传、多个单文件上传、多文件上传的过程化封装 html 上传文件表单 单个文件上传超时 uploadify单文件上
-
html文件如何打包 ?html文件打包的方法介绍