從 Rspack 0.x 遷移#

本文件列出從 Rspack v0.7 到 v1.0 的所有重大變更。您可以參考此文件進行遷移。

詳情請參閱Rspack v1.0.0 中的重大變更。

設定預設值調整#

在 Rspack 1.x 中，我們已將預設設定值與 Webpack 的預設值對齊。

[重要] experiments.css#

experiments.css 的預設值已從 true 變更為 false。

在 Rspack 0.x 中，預設啟用 experiments.css，這表示結尾為 *.css 的檔案會自動被視為 type: 'css/auto'，而無需手動包含其他 loader 來處理 CSS 檔案。

如果您依賴內建功能來處理 CSS 檔案而不使用任何 loader，或者如果您使用以下設定來處理 CSS 檔案

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        type: 'css/auto', // 👈
        use: ['less-loader'],
      },
    ],
  },
};

請注意，您現在需要手動啟用 experiments.css。

[重要] optimization.concatenateModules#

optimization.concatenateModules 的預設值已從 false 變更為

• 當 mode 為 'production' 時為 true。
• 對於 mode 的其他值為 false。

在 Rspack 1.x 中，模組串聯最佳化變得更加穩定。因此，它現在在生產模式中預設啟用，允許將多個模組串聯成單個模組，以減少輸出大小並提高壓縮效率。

devtool#

devtool 的預設值已從 false 變更為

• 當 mode 為 'development' 時為 eval。
• 對於 mode 的其他值為 false。

@rspack/cli 會覆寫 @rspack/core 中的預設 devtool 值。因此，如果您使用 @rspack/cli，此變更不會影響您。

experiments.asyncWebAssembly#

experiments.asyncWebAssembly 的預設值已從 false 變更為取決於 experiments.futureDefaults 設定。只有當 experiments.futureDefaults 設定為 true 時，才會預設啟用。

如果您使用 WebAssembly 模組作為非同步模組，您現在需要手動將 experiments.asyncWebAssembly 設定為 true。

splitChunks.cacheGroups.{cacheGroup}.reuseExistingChunk#

splitChunks.cacheGroups.{cacheGroup}.reuseExistingChunk 的預設值已從 true 變更為 false。

optimization.moduleIds#

當 mode 為 none 時，optimization.moduleIds 的預設值已變更為 'natural'。

optimization.chunkIds#

當 mode 為 none 時，optimization.chunkIds 的預設值已變更為 'natural'。

已移除的設定#

[重要] 已移除 resolve.tsConfigPath#

請改用 resolve.tsConfig。

module.exports = {
  resolve: {
-   tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
+   tsConfig: path.resolve(__dirname, './tsconfig.json'),
  },
};

output.amdContainer#

請改用 output.library.amdContainer。

對內建 swc-loader 的調整#

為了簡化核心，Rspack 1.x 已移除內建的 SWC 插件。您現在需要手動包含它們。

[重要] 已移除 rspackExperiments.styledComponents#

請改用 @swc/plugin-styled-components。

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           styledComponents: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-styled-components", {}]],
+           },
          },
        },
      },
    ],
  },
};

[重要] 已移除 rspackExperiments.emotion#

請改用 @swc/plugin-emotion。

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           emotion: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-emotion", {}]],
+           },
          },
        },
      },
    ],
  },
};

[重要] 已移除 rspackExperiments.relay#

請改用 @swc/plugin-relay。

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           relay: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-relay", {}]],
+           },
          },
        },
      },
    ],
  },
};

[重要] 已移除 rspackExperiments.preact#

請改用 @swc/plugin-prefresh。

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           preact: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-prefresh", {}]],
+           },
          },
        },
      },
    ],
  },
};

對內建插件的調整#

[重要] CSS 最小化插件調整#

在 Rspack 0.x 中，我們使用內建的 rspack.SwcCssMinimizerRspackPlugin 來壓縮 CSS 大小。現在，我們已將其移除，並以 rspack.LightningCssMinimizerRspackPlugin 取代，以處理相同的功能。

如果您先前手動註冊並設定了 rspack.SwcCssMinimizerRspackPlugin，則應切換至 rspack.LightningCssMinimizerRspackPlugin

module.exports = {
  optimization: {
    minimizer: [
-     new rspack.SwcCssMinimizerRspackPlugin({
+     new rspack.LightningCssMinimizerRspackPlugin({
        // options
      }),
    ],
  },
};

rspack.SwcJsMinimizerRspackPlugin#

Rspack 內建和預設啟用的 JavaScript 最小化插件的設定已與 SWC 的最小化設定對齊。重大變更如下

• minimizerOptions.passes：已移至 minimizerOptions.compress.passes
• minimizerOptions.dropConsole：已移至 minimizerOptions.compress.drop_console
• minimizerOptions.pureFuncs：已移至 minimizerOptions.compress.pure_funcs
• minimizerOptions.keepClassNames：已移至 minimizerOptions.mangle.keep_classnames
• minimizerOptions.keepFnNames：已移至 minimizerOptions.mangle.keep_fnames
• minimizerOptions.comments：已移至 minimizerOptions.format.comments
• minimizerOptions.asciiOnly：已移至 minimizerOptions.format.ascii_only

預設值變更

• comments (options.format.comments)：已從 false 變更為 "some"

rspack.HtmlRspackPlugin#

我們已將其設定與 html-webpack-plugin 對齊，並進行以下重大變更

• excludedChunks 已重新命名為 excludeChunks
• 當 mode 為 'production' 時，minify 現在預設為 true

其他變更#

[重要] @rspack/cli#

@rspack/cli 已將其對 webpack-dev-server 的依賴從 v4 升級至 v5。如果您正在使用 @rspack/cli，請注意以下重大變更：

• webpack-dev-server v5 最低支援的 Node.js 版本為 18.12.0。
• 多個配置選項已變更。請參考 webpack-dev-server v5 遷移指南。

[重要] 使用 Rust 重構 ResolverFactory 和 Resolver#

ResolverFactory 和 Resolver 已使用 Rust 進行重構，以統一 JS 和 Rust 端的實作。由於此變更，ResolverFactory 和 Resolver 目前不支援任何 hook。

此外，Resolver 現在僅支援以下方法：

• resolveSync
• resolve
• withOptions

此變更可能會導致某些外掛程式無法使用。

compiler.hooks.normalModuleFactory.tap('PLUGIN', normalModuleFactory => {
  normalModuleFactory.hooks.resolve.tap('PLUGIN', data => {
    // Redirect the module
    if (data.request === './foo.js') {
      data.request = './bar.js';
    }
  });
});