webpack からの移行

Rspack の設定は webpack をベースに設計されているため、プロジェクトを webpack から Rspack へ簡単に移行できます。

このドキュメントは主に webpack 5 を使用しているプロジェクトを対象としています。Rspack の API と設定は webpack 5 に準拠しているためです。webpack 5 を使用していないプロジェクトについては、参照できる他の移行ガイドがあります。

webpack v4 以前のバージョンを使用しているプロジェクトについては、webpack - v4 から v5 へを参照して、違いを理解してください。
create-react-app または CRACO を使用しているプロジェクトについては、Create React App の移行を参照してください。
Vue CLI を使用しているプロジェクトについては、Rsbuild - Vue CLI からの移行を参照してください。

Rspack のインストール

プロジェクトディレクトリで、Rspack を devDependencies としてインストールします。

npm

yarn

pnpm

bun

npm add @rspack/core @rspack/cli -D

これで、プロジェクトから webpack 関連の依存関係を削除できます。

npm

yarn

pnpm

bun

npm remove webpack webpack-cli webpack-dev-server

ヒント

vue-loader や fork-ts-checker-webpack-plugin を使用する場合など、webpack を開発依存関係として保持する必要がある場合があります。

これは、これらのプラグインが webpack のサブパスを直接 import し、webpack と結合しているためです。この問題が発生した場合は、これらのプラグインのメンテナにフィードバックを提供し、webpack をオプションの依存関係にできるかどうかを問い合わせることができます。

package.json の更新

ビルドスクリプトを更新して、webpack の代わりに Rspack を使用するようにします。

package.json

{
  "scripts": {
-   "serve": "webpack serve",
-   "build": "webpack build",
+   "serve": "rspack serve",
+   "build": "rspack build",
  }
}

設定の更新

webpack.config.js ファイルの名前を rspack.config.js に変更します。

ヒント

Rspack コマンドは、webpack コマンドと同様に -c または --config で設定ファイルを指定できます。ただし、webpack とは異なり、設定ファイルが明示的に指定されていない場合、Rspack はデフォルトで rspack.config.js を使用します。

Rspack は現在、すべての webpack 設定をサポートしておらず、一部の設定はビルド出力に影響を与える可能性があります。ビルド出力の正確性を保証するために、Rspack はデフォルトで設定の厳密な検証を有効にしています。ただし、Rspack は段階的な移行を容易にするための緩いモードも提供しています。RSPACK_CONFIG_VALIDATE 環境変数を設定することで有効にできます。

# Enable loose validation mode will print out erroneous configurations but will not throw error.
RSPACK_CONFIG_VALIDATE=loose rspack build
# Enable loose validation mode, without printing errors or throwing error.
RSPACK_CONFIG_VALIDATE=loose-silent rspack build

Rspack は webpack の今後の機能の実装に積極的に取り組んでいるため、次に示すように、一部の設定のデフォルトは webpack 5 と異なります。

設定	webpack デフォルト	Rspack デフォルト
node.global	true	'warn'
node.__filename	'mock'	'warn-mock'
node.__dirname	'mock'	'warn-mock'

Rspack でサポートされている設定については、Rspack の設定を参照してください。

Webpack 組み込みプラグイン

Rspack は、webpack のほとんどの組み込みプラグインを実装しており、名前と設定パラメータは同じであるため、簡単に置き換えることができます。

たとえば、DefinePlugin の置換

rspack.config.js

- const webpack = require('webpack');
+ const rspack = require('@rspack/core');

module.exports = {
  //...
  plugins: [
-   new webpack.DefinePlugin({
+   new rspack.DefinePlugin({
      // ...
    }),
  ],
}

Rspack でサポートされている webpack プラグインの詳細については、Webpack に合わせた組み込みプラグインを参照してください。

コミュニティプラグイン

Rspack は、webpack コミュニティプラグインのほとんどをサポートしており、現在サポートされていない一部のプラグインに対して代替ソリューションも提供しています。

Rspack と一般的な webpack コミュニティプラグインとの互換性の詳細については、プラグインの互換性を参照してください。

copy-webpack-plugin → rspack.CopyRspackPlugin

rspack.config.js

- const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const rspack = require('@rspack/core');

module.exports = {
  plugins: [
-   new CopyWebpackPlugin({
+   new rspack.CopyRspackPlugin({
      // ...
    }),
  ]
}

mini-css-extract-plugin → rspack.CssExtractRspackPlugin

rspack.config.js

- const CssExtractWebpackPlugin = require('mini-css-extract-plugin');
+ const rspack = require('@rspack/core');

module.exports = {
  plugins: [
-   new CssExtractWebpackPlugin({
+   new rspack.CssExtractRspackPlugin({
      // ...
    }),
  ]
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
-          CssExtractWebpackPlugin.loader,
+          rspack.CssExtractRspackPlugin.loader,
          "css-loader"
        ],
+        type: 'javascript/auto'
      }
    ]
  }
}

tsconfig-paths-webpack-plugin → resolve.tsConfig

rspack.config.js

- const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  resolve: {
-   plugins: [new TsconfigPathsPlugin({})]
+   tsConfig: {}
  }
}

ローダー

Rspack のローダーランナーは webpack のローダー機能と完全に互換性があり、webpack ローダーの大部分をサポートしています。既存のローダーを変更せずに使用できます。ただし、最高のパフォーマンスを実現するには、次のローダーの移行を検討してください。

babel-loader / swc-loader → builtin:swc-loader

builtin:swc-loader を使用すると、JavaScript と Rust の間の頻繁な通信を回避できるため、babel-loader および外部 swc-loader と比較して、パフォーマンスが向上します。

Babel プラグインを使用してカスタム変換ロジックが必要な場合は、babel-loader を保持できますが、パフォーマンスの低下を防ぐために、使用を少ないファイルに制限することをお勧めします。

rspack.config.js

module.exports = {
   module: {
     rules: [
-      {
-        test: /\.tsx?$/i,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-typescript'],
-            },
-          },
-        ],
-        test: /\.jsx?$/i,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-react'],
-            },
-          },
-        ],
-      },
+      {
+        test: /\.(j|t)s$/,
+        exclude: [/[\\/]node_modules[\\/]/],
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+            },
+            externalHelpers: true,
+            transform: {
+              react: {
+                runtime: 'automatic',
+                development: !prod,
+                refresh: !prod,
+              },
+            },
+          },
+          env: {
+            targets: 'Chrome >= 48',
+          },
+        },
+      },
+      {
+        test: /\.(j|t)sx$/,
+        loader: 'builtin:swc-loader',
+        exclude: [/[\\/]node_modules[\\/]/],
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+                development: !prod,
+                refresh: !prod,
+              },
+            },
+            externalHelpers: true,
+          },
+          env: {
+            targets: 'Chrome >= 48', // browser compatibility
+          },
+        },
+      },
     ],
   },
 };

file-loader / url-loader / raw-loader → アセットモジュール

Rspack は、Webpack 5 のアセットモジュールを実装しており、パフォーマンスを向上させるために、file-loader、url-loader、および raw-loader を置き換えるためにアセットモジュールを使用します。

file-loader → asset/resource

rspack.config.js

module.exports = {
   module: {
     rules: [
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        use: ["file-loader"],
-      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        type: "asset/resource",
+      },
     ],
   },
 };

url-loader → asset/inline

rspack.config.js

module.exports = {
   module: {
     rules: [
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        use: ["url-loader"],
-      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        type: "asset/inline",
+      },
     ],
   },
 };

raw-loader → asset/source

rspack.config.js

module.exports = {
   module: {
     rules: [
-      {
-        test: /^BUILD_ID$/,
-        use: ["raw-loader",],
-      },
+      {
+        test: /^BUILD_ID$/,
+        type: "asset/source",
+      },
     ],
   },
 };

このページ内

webpack からの移行#

Rspack のインストール#

package.json の更新#

設定の更新#

Webpack 組み込みプラグイン#

コミュニティプラグイン#

copy-webpack-plugin → rspack.CopyRspackPlugin#

mini-css-extract-plugin → rspack.CssExtractRspackPlugin#

tsconfig-paths-webpack-plugin → resolve.tsConfig#

ローダー#

babel-loader / swc-loader → builtin:swc-loader#

file-loader / url-loader / raw-loader → アセットモジュール#

file-loader → asset/resource#

url-loader → asset/inline#

raw-loader → asset/source#

webpack からの移行

Rspack のインストール

package.json の更新

設定の更新

Webpack 組み込みプラグイン

コミュニティプラグイン

copy-webpack-plugin → rspack.CopyRspackPlugin

mini-css-extract-plugin → rspack.CssExtractRspackPlugin

tsconfig-paths-webpack-plugin → resolve.tsConfig

ローダー

babel-loader / swc-loader → builtin:swc-loader

file-loader / url-loader / raw-loader → アセットモジュール

file-loader → asset/resource

url-loader → asset/inline

raw-loader → asset/source