从 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'，而无需手动包含其他加载器来处理 CSS 文件。

如果您依赖内置功能来处理 CSS 文件而不使用任何加载器，或者您使用了以下配置来处理 CSS 文件

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

请注意，您现在需要手动启用 experiments.css。

[重要] optimization.concatenateModules#

optimization.concatenateModules 的默认值已从 false 变更为

• true（当 mode 为 'production' 时）。
• false（对于 mode 的其他值）。

在 Rspack 1.x 中，模块串联优化已变得更加稳定。因此，它现在在生产模式下默认启用，允许将多个模块串联到一个模块中，以减小输出大小并提高压缩效率。

devtool#

devtool 的默认值已从 false 变更为

• eval（当 mode 为 'development' 时）。
• false（对于 mode 的其他值）。

@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#

optimization.moduleIds 的默认值已更改为 'natural'（当 mode 为 none 时）。

optimization.chunkIds#

optimization.chunkIds 的默认值已更改为 'natural'（当 mode 为 none 时）。

已删除的配置#

[重要] 已删除 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 目前不支持任何钩子。

此外，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';
    }
  });
});