webpack to Rspack ~ Rspack移行の結果と注意点 ~

ARANK

プロダクトのビルドツールを webpack から Rspack に移行したので、その経緯と注意点をまとめます。!🦀 Rspackとは？Rustで書かれた高速なJavaScriptのバンドルツールです。 webpackエコシステムとの強力な互換性を持ちます。2024/08/24にv1.0.0がリリースされました。 なぜRspackに移行したのか？ビルド速度改善のため以前からwebpackの移行を検討していましたが、プロダクトがwebpack依存の構成で、Viteやその他のビルドツールへの移行が少し面倒でした。 Rspackであればwebpackのプラグインもそのまま動き移行が容易、かつ速度改善が見込まれるためRspackへの移行を選びました。💡 移行方法移行方法は、rspackの公式ドキュメントの migrate from webpack をそのまま参考にして進めました。それだけで、devもproducitonもビルドは通ったので本当に楽でした。修正内容webpack.config.js を rspack.config.js に変更const webpack = require('webpack') を const rspack = require('@rspack/core') に変更MiniCssExtractPlugin など特定のプラグインを rspack の同等のプラグインに変更ts-loader など特定のローダーを rspack のビルトインのローダーに変更起動コマンド…