作者按:因為教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步《webpack4 系列教程(十三):自動生成 HTML 檔案》原文地址。更歡迎來我的小站看更多原創內容:godbmw.com,進行“姿勢”交流 ♪(^∇^*)
0. 課程介紹和資料
本節課的程式碼目錄如下:
本節課用的 plugin 和 loader 的配置檔案package.json
如下:
{
"devDependencies": {
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"url-loader": "^1.0.1",
"webpack": "^4.16.1"
}
}
複製程式碼
1. 為什麼要自動生成 HTML?
看過這個系列教程的朋友,都知道在之前的例子中,每次執行webpack
打包生成js
檔案後,都必須在index.html
中手動插入打包好的檔案的路徑。
但在真實生產環境中,一次執行webpack
後,完整的index.html
應該是被自動生成的。例如靜態資源、js 指令碼都被自動插入了。
為了實現這個功能,需要藉助HtmlWebpackPlugin
根據指定的index.html
模板生成對應的 html 檔案,還需要配合html-loader
處理 html 檔案中的<img>
標籤和屬性。
2. 編寫入口檔案
編寫src/vendor/sum.js
檔案,封裝sum()
函式作為示例,被其他檔案引用(模組化程式設計):
export function sum(a, b) {
return a + b;
}
複製程式碼
編寫入口檔案src/app.js
,引入上面編寫的sum()
函式,並且執行它,以方便我們在控制檯檢查打包結果:
import { sum } from "./vendor/sum";
console.log("1 + 2 =", sum(1, 2));
複製程式碼
3. 編寫 HTML 檔案
根目錄下的index.html
會被html-webpack-plugin
作為最終生成的 html 檔案的模板。打包後,相關引用關係和檔案路徑都會按照正確的配置被新增進去。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<img src="./src/assets/imgs/xunlei.png">
</body>
</html>
複製程式碼
4. 編寫Webpack
配置檔案
老規矩,HtmlWebpackPlugin
是在plugin
這個選項中配置的。常用引數含義如下:
- filename:打包後的 html 檔名稱
- template:模板檔案(例子原始碼中根目錄下的 index.html)
- chunks:和
entry
配置中相匹配,支援多頁面、多入口 - minify.collapseWhitespace:壓縮選項
除此之外,因為我們在index.html
中引用了src/assets/imgs/
目錄下的靜態檔案(圖片型別)。需要用url-loader
處理圖片,然後再用html-loader
宣告。注意兩者的處理順序,url-loader
先處理,然後才是html-loader
處理。
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name]-[hash:5].bundle.js",
chunkFilename: "[name]-[hash:5].chunk.js"
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 10000, // size <= 20KB
publicPath: "static/",
outputPath: "static/"
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
chunks: ["app"], // entry中的app入口才會被打包
minify: {
// 壓縮選項
collapseWhitespace: true
}
})
]
};
複製程式碼
5. 結果和測試
執行webpack
進行打包,下面是打包結果:
可以在/dist/
中檢視自動生成的index.html
檔案,如下圖所示,指令碼和靜態資源路徑都被正確處理了:
直接在 Chrome 開啟index.html
,並且開啟控制檯:
圖片成功被插入到頁面,並且 js 的執行也沒有錯誤,成功。
6. 更多資料
html-loader
文件: www.webpackjs.com/loaders/htm…html-webpack-plugin
文件: www.webpackjs.com/plugins/htm…- 《webpack4 系列教程(十三):自動生成 HTML 檔案》原文地址