webpack4 系列教程(十三)：自動生成HTML檔案

godbmw發表於2019-02-27

作者按：因為教程所示圖片使用的是 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
      }
    })
  ]
};
複製程式碼