聊聊webpack怎麼壓縮打包html資源
- 青灯夜游轉載
- 2022-08-09 19:44:533495瀏覽
webpack中怎麼壓縮打包html資源？以下這篇文章就來跟大家簡單介紹一下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', // 指定输出文件名和位置（相对于输出目录）
// 关于插件的其他项配置，可以查看插件官方文档
})
]
}詳細設定連結： https://www.npmjs.com/package/html-webpack- plugin
確保入口模板檔案的路徑和檔案名稱與設定一致，然後可以編譯。
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']
})
]
}Tip: 這裡要注意的是要編譯多少個HTML文件，就要new幾次
HtmlWebpackPlugin。
上面的設定編譯成功後，輸出狀況是這樣的：
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="index.js"></script></head>
<body>
<div id="app">
html 打包配置
</div>
</body>
</html><script defer src="index.js"></script>是自動引入的
瀏覽器開啟打包輸出的index.html，發現樣式起了效果，控制太也正常輸出：
程式設計影片！ ！
以上是聊聊webpack怎麼壓縮打包html資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！