谈谈webpack怎么压缩打包html资源
为什么需要打包html资源
写代码时引入的是src下面的js文件,经过webpack打包后,形成了一个入口文件,此时html中js文件的名称和路径就不对了,所以需要webpack打包,把html中引入js文件的路径替换了。
用webpack打包html的好处有:
(1)可以自动将打包后的js文件引入html
(2)html打包后依然会生成在build文件夹下和打包后的js文件放在一起,这样上线的时候我们只需要将打包生成的文件夹一起拷贝到上线环境就可以了
(3)会帮我们压缩html文件
webpack中怎么压缩打包html资源
1、安装插件
webpack原生只能理解JS和JSON文件,要支持打包其他类型的文件,都需要安装相应的插件或loader。
如果我们需要打包HTML文件,首先需要安装html-webpack-plugin
插件:
npm install html-webpack-plugin -D
这个插件的作用:
-
默认在出口下创建一个html文件,然后导入所有的JS/CSS资源
-
我们也可以自己指定一个html文件,在此html文件中加入资源
2、webpack.config.js配置
安装好html-webpack-plugin
插件后,需要在webpack.config.js
文件中进行配置:
// ...
// 1. 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. 在plugins中配置插件
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 指定入口模板文件(相对于项目根目录)
filename: 'index.html', // 指定输出文件名和位置(相对于输出目录)
// 关于插件的其他项配置,可以查看插件官方文档
})
]
}
确保入口模板文件的路径和文件名与配置一致,然后可以编译。
3、多JS入口和多HTML情况的配置
面对需要编译出多个HTML文件,且文件需要引入不同的JS文件,但默认情况下,打包后的HTML文件会引入所有打包后的JS文件,我们可以指定chunk
来分配JS。
const path = require('path');
// 1. 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. 配置JS入口(多入口)
entry: {
vendor: ['./src/jquery.min.js', './src/js/common.js'],
index: './src/index.js',
cart: './src/js/cart.js'
},
// 配置出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'build/js')
},
// 3. 配置插件
plugins: [
new HtmlWebpackPugin({
template: 'index.html',
filename: 'index.html',
// 通过chunk来指定引入哪些JS文件
chunk: ['index', 'vendor']
}),
// 需要编译多少个HTML,就需要new几次插件
new HtmlWebpackPlugin({
template: './src/cart.html',
filename: 'cart.html',
chunk: ['cart', 'vendor']
})
]
}
上面的配置编译成功后,输出情况是这样的:
build
|__ index.html # 引入index.js和vendor.js
|__ cart.html # 引入cart.js和vendor.js
|__ js
|__ vendor.js # 由jquery.min.js和common.js生成
|__ index.js # 由index.js生成
|__ cart.js # 由cart.js生成
压缩打包html资源实例
1、webpack.config.js配置
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
plugins: [
// html-webpack-plugin html 打包配置 该插件将为你生成一个 HTML5 文件
new HTMLWebpackPlugin({
template: "./index.html", // 打包到模板的相对或绝对路径 (打包目标)
title: '首页', // 用于生成的HTML文档的标题
hash: true,//true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。主要用于清除缓存,
minify: { // 压缩html
collapseWhitespace: true, // 折叠空白区域
keepClosingSlash: true, // 保持闭合间隙
removeComments: true, // 移除注释
removeRedundantAttributes: true, // 删除冗余属性
removeScriptTypeAttributes: true, // 删除Script脚本类型属性
removeStyleLinkTypeAttributes: true, // 删除样式链接类型属性
useShortDoctype: true, // 使用短文档类型
preserveLineBreaks: true, // 保留换行符
minifyCSS: true, // 压缩文内css
minifyJS: true, // 压缩文内js
}
}),
],
...
2、此时我们的index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
</head>
<body>
<div id="app">
html 打包配置
</div>
</body>
</html>
3、此时我们的index.js
import './../css/index.less'
function add(x,y) {
return x y
}
console.log(add(2,3));
3、控制台webpack键入打包,发现打包输出文件多了个index.html,内容如下
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
<script defer src="https://www.swvq.com/index.js"></script></head>
<body>
<div id="app">
html 打包配置
</div>
</body>
</html>
<script defer="" src="https://www.swvq.com/index.js"></script>
是自动引入的
浏览器打开打包输出的 index.html,发现样式起了效果,控制太也正常输出:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbaicf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24