溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“webpack中如何壓縮打包html資源”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“webpack中如何壓縮打包html資源”吧!
寫代碼時引入的是src下面的js文件，經過webpack打包后，形成了一個入口文件，此時html中js文件的名稱和路徑就不對了，所以需要webpack打包，把html中引入js文件的路徑替換了。
用webpack打包html的好處有：
（1）可以自動將打包后的js文件引入html
（2）html打包后依然會生成在build文件夾下和打包后的js文件放在一起，這樣上線的時候我們只需要將打包生成的文件夾一起拷貝到上線環境就可以了
（3）會幫我們壓縮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']
})
]
}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生成
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資源”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
