設定 Rspack#

Rspack 提供類似 webpack 的設定。本章將向您展示如何使用 Rspack 設定。

設定檔#

當您執行 Rspack CLI 時，Rspack 會自動讀取當前工作目錄中的 rspack.config.js 檔案。

一個基本的 Rspack 設定檔看起來像這樣

module.exports = {
  entry: {
    main: './src/index.js',
  },
};

設定檔格式#

Rspack 支援四種類型的設定檔，.js、.ts、.cjs 和 .mjs 格式。

• rspack.config.js：預設為 CommonJS 格式，如果 package.json 的類型為 module，則為 ES modules 格式。
• rspack.config.ts：TypeScript 格式，使用 ts-node 在內部編譯為 .js 格式。
• rspack.config.cjs：強制為 CommonJS 格式。
• rspack.config.mjs：強制為 ES modules 格式。

有關 CommonJS 和 ES modules 之間的差異，請參閱 ES modules 和 CommonJS。

類型檢查#

rspack.config.js 是一個 JavaScript 檔案，您可以使用 JSDoc 來啟用 IDE 的 Intellisense 和 TypeScript 類型檢查。

// @ts-check

/** @type {import('@rspack/cli').Configuration} */
const config = {
  entry: {
    main: './src/index.js',
  },
};
module.exports = config;

或者，您可以使用 defineConfig 輔助函數，它提供設定的自動完成功能。

// @ts-check

const { defineConfig } = require('@rspack/cli');

const config = defineConfig({
  entry: {
    main: './src/index.js',
  },
});
module.exports = config;

或者，您可以使用 TypeScript 作為設定檔。預設的 TypeScript 設定檔名為 rspack.config.ts。

import { Configuration } from '@rspack/cli';

const config: Configuration = {
  entry: {
    main: './src/index.js',
  },
};

export = config;

您需要安裝 ts-node 作為 devDependencies，以便 Rspack 可以解析 ts 副檔名。

{
  "devDependencies": {
    "ts-node": "^10.9.2"
  }
}

如果您使用的 Node.js 版本支援 --experimental-transform-types 標誌，則可以使用 Node.js 的內建 TS 轉換，而無需安裝 ts-node。

{
  "build": "NODE_OPTIONS=--experimental-transform-types rspack build"
}

請注意，如果 JS 檔案不存在，Rspack 將首先搜尋 JavaScript，然後搜尋 TypeScript。

指定設定檔#

您可以使用 --config 選項指定設定檔的名稱。

例如，如果您需要在執行建置時使用 rspack.prod.config.js 檔案，您可以將以下腳本新增至 package.json

{
  "scripts": {
    "dev": "rspack serve",
    "build": "rspack build --config rspack.prod.config.js"
  }
}

您也可以將 --config 選項縮寫為 -c

$ rspack build -c rspack.prod.config.js

匯出設定函數#

Rspack 支援在 rspack.config.js 中匯出函數，您可以在函數中動態計算設定並將其回傳給 Rspack。

module.exports = function (env, argv) {
  return {
    devtool: env.production ? 'source-map' : 'eval',
  };
};

如您從上面的範例中所見，該函數接受兩個輸入參數

• 第一個參數是 env，它對應於執行 CLI 命令時 --env 選項的值。
• 第二個參數是 argv，其中包含傳遞給 CLI 的所有選項。

判斷當前環境#

除了傳遞 env 參數之外，更常見的是使用 process.env.NODE_ENV 來判斷當前環境

module.exports = function (env, argv) {
  const isProduction = process.env.NODE_ENV === 'production';
  return {
    devtool: isProduction ? 'source-map' : 'eval',
  };
};

合併設定#

您可以使用 webpack-merge 匯出的 merge 函數來合併多個設定。

const { merge } = require('webpack-merge');

const base = {};

const dev = {
  plugins: [new DevelopmentSpecifiedPlugin()],
};

module.exports =
  process.env.NODE_ENV === 'development' ? merge(base, dev) : base;

有關 merge 的更多資訊，請參閱 webpack-merge 文件。