Webpack 外掛

外掛套件	@rushstack/heft-webpack4-plugin @rushstack/heft-webpack5-plugin
外掛名稱	webpack4-plugin 由 Webpack4Plugin.ts 所實現 webpack5-plugin 由 Webpack5Plugin.ts 所實現
外掛設定檔	(無)
heft.json 選項	IWebpackPluginOptions (Webpack 4) IWebpackPluginOptions (Webpack 5)

此工作會呼叫 Webpack 工具來產生應用程式套件。它會提供以下功能：

將許多小的 .js 檔案合併成一個大的檔案，以加速下載
透過套用各種編譯最佳化功能來提升效能，例如內聯和廢棄程式碼消除 («tree shaking»)
使用 Terser 最小化程式預設值來壓縮和混淆程式碼，縮短識別碼
將資產（例如 .css，甚至圖像）轉換成嵌入式 JavaScript 物件

Webpack 亦具有作為一般目的建構系統的能力，例如呼叫編譯器或 linter，但 Heft 沒有這樣使用。Heft 呼叫 TypeScript 編譯器來產生暫時性的 .js 檔案，供其他工作使用，例如 Jest 或 Webpack。這麼做可以減少編譯程序的通過次數，並避免編譯器最佳化在不同脈絡（ts-loader、ts-jest 等）中被重複執行。

heft-webpack-basic-tutorial 範例專案說明了一個使用 Webpack 和 React 的完整專案。

什麼時候使用

Webpack 應使用在輸出為網頁應用程式套件的專案中。Webpack 亦可組裝 Node.js 工具或服務，但這種情形較少見。

在這些備註中，我們會假設你正在使用 Webpack 5。對於 Webpack 4，請在每個地方將 @rushstack/heft-webpack4-plugin 取代 @rushstack/heft-webpack5-plugin。它們的用法基本上是相同的。

package.json 相依項

使用 Webpack 的最簡單方式是透過 @rushstack/heft-web-rig，它提供標準組態，並具有一組建議的外掛程式和載入器。

否則，如果你不使用 rig，則需要將外掛程式套件加入專案中

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package @rushstack/heft-webpack5-plugin --dev

# If you are using vanilla NPM, run this shell command in your project folder:
npm install @rushstack/heft-webpack5-plugin --save-dev

@rushstack/heft-webpack5-plugin 套件具有對 webpack 的協力相依項。如果你不使用 rig，則你也必須加入這個相依項

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package webpack --dev

# If you are using vanilla NPM, run this shell command in your project folder:
npm install webpack --save-dev

重要提示：如果你正在使用 @rushstack/heft-web-rig，則協力相依項已由 rig 滿足，因此嚴格來說，無需將 webpack 加入專案的 package.json 相依項中。但這麼做可能會很有用，例如滿足專案特定載入器的協力相依項。如果你加入這個相依項，請確定 SemVer 範圍與 rig 的 heft-web-rig/package.json 相同，以避免不一致。

你還應該將 @types/webpack-env 加入專案，它提供 Webpack 環境的 TypeScript 型別。

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package @types/webpack-env --exact  --dev

# Because @types packages don't follow SemVer, it's a good idea to use --exact

# If you are using vanilla NPM, run this shell command in your project folder:
npm install @types/webpack-env --save-dev --save-exact

# Because @types packages don't follow SemVer, it's a good idea to use --save-exact

組態

由於 @types/webpack-env 定義了全域 API（無法使用規律的 import 陳述式存取），因此必須以這種方式將它加入 TypeScript 組態設定

<專案資料夾>/tsconfig.json

{
  "extends": "./node_modules/@rushstack/heft-web-rig/profiles/library/tsconfig-base.json",
  "compilerOptions": {
    "types": [
      "webpack-env" // <---- ADD THIS
    ]
  }
}

如果 rig 尚未提供 Webpack，則 heft.json 組態檔可以像以下範例中所述來呼叫它

<專案資料夾>/config/heft.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft.schema.json",

  "aliasesByName": {
    "start": {
      "actionName": "build-watch",
      "defaultParameters": ["--serve"]
    }
  },

  "phasesByName": {
    "build": {
      "cleanFiles": [
        { "sourcePath": "dist" },
        { "sourcePath": "lib" },
        { "sourcePath": "lib-amd" },
        { "sourcePath": "lib-commonjs" },
        { "sourcePath": "lib-es6" }
      ],
      "tasksByName": {
        "sass": {
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-sass-plugin"
          }
        },
        "typescript": {
          "taskDependencies": ["sass"],
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-typescript-plugin"
          }
        },
        "webpack": {
          "taskDependencies": ["typescript"],
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-webpack5-plugin"
          }
        }
        . . .
      }
    },
    . . .
  }
}

接下來，在專案資料夾中建立一個 webpack.config.js 檔。以下是一個基礎範例

<專案資料夾>/webpack.config.js

'use strict';

const path = require('path');

const webpackConfig = {
  mode: 'development',
  resolve: {
    // Note: Do not specify '.ts' or '.tsx' here.  Heft invokes Webpack as a post-process after the compiler.
    extensions: ['.js', '.jsx', '.json']
  },
  entry: {
    app: path.join(__dirname, 'lib', 'index.js')
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[contenthash].js'
  }
};

module.exports = webpackConfig;

如果你想要在使用本機端開發伺服器進行開發時使用略微不同的組態，則可以選擇建立一個稱為 webpack.dev.config.js 的第二個檔案。

若要啟動本機端開發伺服器，請使用 heft start 命令，依慣例，它被定義為 heft build-watch --serve 的別名（請參閱上方的 aliasesByName）。每當你儲存對來源檔案所做的變更時，Heft 的監看模式會重新編譯你的專案，然後 Webpack 熱模組重載應使用這個應用程式的最新建置來重新整理你的網頁瀏覽器。

與 Jest 互動

Webpack 最適合搭配 esnext 模組格式使用，而 Jest 則必須使用 commonjs 模組格式，因為它的測試是由 Node.js 執行時期執行的。若要同時使用 Webpack 和 Jest，你需要發射這兩種模組格式。Jest 外掛程式區段中說明了這點。

CLI 參數

heft-jest-plugin/heft-plugin.json 定義下列參數

  --serve
                        Start a local web server for testing purposes using
                        webpack-dev-server. This parameter is only available
                        when running in watch mode.

什麼時候使用​

package.json 相依項​

組態​

與 Jest 互動​

CLI 參數​

什麼時候使用

package.json 相依項

組態

與 Jest 互動

CLI 參數