webpack4 系列教程(十三)：自動生成HTML文件

時間 2019-11-06

標籤 webpack4 webpack 系列教程十三自動生成 html 文件欄目 HTML 简体版

原文原文鏈接

做者按：由於教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十三)：自動生成 HTML 文件》原文地址。更歡迎來個人小站看更多原創內容：godbmw.com，進行「姿式」交流 ♪(^∇^*)javascript

0. 課程介紹和資料

本節課的代碼目錄以下：html

本節課用的 plugin 和 loader 的配置文件package.json以下：java

{
  "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

但在真實生產環境中，一次運行webpack後，完整的index.html應該是被自動生成的。例如靜態資源、js 腳本都被自動插入了。git

爲了實現這個功能，須要藉助HtmlWebpackPlugin根據指定的index.html模板生成對應的 html 文件，還須要配合html-loader處理 html 文件中的<img>標籤和屬性。github

2. 編寫入口文件

編寫src/vendor/sum.js文件，封裝sum()函數做爲示例，被其餘文件引用（模塊化編程）：web

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 文件的模板。打包後，相關引用關係和文件路徑都會按照正確的配置被添加進去。json

<!-- 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這個選項中配置的。經常使用參數含義以下：markdown

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
      }
    })
  ]
};
複製代碼