webpack4 系列教程(十三)：自動生成HTML檔案
作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步 ofollow,noindex">《webpack4 系列教程(十三)：自動生成 HTML 檔案》原文地址 。更歡迎來我的小站看更多原創內容： godbmw.com ，進行“姿勢”交流 ♪( ∇ *)
0. 課程介紹和資料
本節課的程式碼目錄如下：
30.png
本節課用的 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 這個選項中配置的。常用引數含義如下：
entry
除此之外，因為我們在 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 進行打包，下面是打包結果：
image
可以在 /dist/ 中檢視自動生成的 index.html 檔案，如下圖所示，指令碼和靜態資源路徑都被正確處理了：
image
直接在 Chrome 開啟 index.html ，並且開啟控制檯：
image
圖片成功被插入到頁面，並且 js 的執行也沒有錯誤，成功。
6. 更多資料
-
html-loader文件: https://www.webpackjs.com/loaders/html-loader/ -
html-webpack-plugin文件: https://www.webpackjs.com/plugins/html-webpack-plugin/ - 《webpack4 系列教程(十三)：自動生成 HTML 檔案》原文地址