Rspack の設定#

Rspack は webpack と同様の設定を提供します。この章では、Rspack の設定を使用する方法を説明します。

設定ファイル#

Rspack CLI を実行すると、Rspack は現在の作業ディレクトリにある rspack.config.js ファイルを自動的に読み取ります。

基本的な Rspack 設定ファイルは次のようになります。

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

設定ファイルの形式#

Rspack は、.js、.ts、.cjs、および .mjs の 4 種類の設定ファイルをサポートしています。

• 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;

Rspack が ts 拡張子を解決できるように、ts-node を devDependencies としてインストールする必要があります。

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

使用している Node.js のバージョンが --experimental-transform-types フラグをサポートしている場合は、ts-node をインストールしなくても Node.js の組み込みの TS 変換を使用できます。

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

Rspack は、JS ファイルが存在しない場合は、最初に 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',
  };
};

上記の例からわかるように、関数は 2 つの入力パラメーターを受け取ります。

• 最初の引数は env で、CLI コマンドを実行するときの --env オプションの値に対応します。
• 2 番目の引数は 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 ドキュメントを参照してください。