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

godbmw發表於2019-02-27

作者按:因為教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步《webpack4 系列教程(十三):自動生成 HTML 檔案》原文地址。更歡迎來我的小站看更多原創內容:godbmw.com,進行“姿勢”交流 ♪(^∇^*)

0. 課程介紹和資料

本節課的程式碼目錄如下:

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

本節課用的 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進行打包,下面是打包結果:

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

可以在/dist/中檢視自動生成的index.html檔案,如下圖所示,指令碼和靜態資源路徑都被正確處理了:

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

直接在 Chrome 開啟index.html,並且開啟控制檯:

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

圖片成功被插入到頁面,並且 js 的執行也沒有錯誤,成功。

6. 更多資料

相關文章