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

• URL: https://zenn.dev/lapras_inc/articles/b2df9989fe2c6e
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: LAPRASがwebpackからRspackへビルドツールを移行した経緯と、prodビルドで発生した3つの具体的な不具合への対処を詳述した記事。Rspackはwebpackプラグインをそのまま利用できる互換性を持ち、公式の移行ガイドに沿って進めるだけでdevelopmentビルドは通った。一方productionビルドではCSSファイルのハッシュ長不一致・node_modulesからのsassインポートが除外される問題・同名で内容が異なるJSファイルが生成されるバグが発生し、それぞれ設定変更とローダー置換で回避した。ビルド時間はdevelopment・productionともに約半分以下に短縮されている。

詳細

移行の動機と対象

• django-webpack-loader経由でwebpackに依存した構成のため、ViteやRollupへの移行が困難
• Rspackはwebpackプラグインをそのまま利用できるため移行を選択
• Rspack v1.0.0は2024年8月リリース

ビルド時間の比較（Apple M1 Max, TypeScript 390ファイル + Vue.js 360ファイル）

• developmentビルド: webpack 18.0s → rspack 8.0s
• productionビルド: webpack 24.5s → rspack 8.7s

prodビルドで発生した3つの問題と対処

① CSSハッシュ長不一致（画面真っ白）

• CssExtractRspackPluginが32文字ハッシュを出力するが、JSから参照する側は20文字を期待
• 対処: filename を [name].[contenthash:20].css に固定

② node_modulesのsassスタイルが除外される

• builtin:lightningcss-loader の最適化により~hoge/dist/style.cssのインポートがバンドルから除外
• 対処: postcss-loader に変更（ビルド速度がやや低下）

③ 同名で内容が異なるJSファイルが生成される（キャッシュ汚染）

• [chunkhash] 指定にもかかわらずハッシュ衝突が発生、CloudFrontでキャッシュ事故が発生
• 対処: [contenthash] に変更（おそらくRspackのバグ）
• 再発防止のためCIでビルド結果の同名ファイル内容差異を検出するスクリプトも追加