Announcing Rsbuild 0.4#

February 06, 2024

Rsbuild 0.4 provides built-in support for module federation. It also contains some incompatible API updates. Please refer to the current document for upgrading.

Module Federation Config#

Rsbuild now provides a builtin moduleFederation option, which will make configuring Module Federation in Rsbuild much easier.

• Example:

export default defineConfig({
  moduleFederation: {
    options: {
      // ModuleFederationPluginOptions
    },
  },
});

When you use this option, Rsbuild will automatically set the default publicPath and splitChunks config, making module federation ready to use out of the box.

See RFC - Provide first-class support for Module Federation for details.

Rename disableFilenameHash#

The output.disableFilenameHash config has been renamed to output.filenameHash.

• Before:

export default {
  output: {
    disableFilenameHash: true,
  },
};

• After:

export default {
  output: {
    filenameHash: false,
  },
};

Remove postcss-flexbugs-fixes#

Rsbuild 0.4 removed the builtin postcss-flexbugs-fixes plugin.

This plugin is used to fix some flex bugs for IE 10 / 11. Considering that modern browsers no longer have these flex issues, we removed this plugin to improve build performance.

If your project needs to be compatible with IE 10 / 11 and encounters these flex issues, you can manually add this plugin in Rsbuild:

• Install plugin:

npm add postcss-flexbugs-fixes -D

• Register plugin in postcss.config.cjs:

module.exports = {
  'postcss-flexbugs-fixes': {},
};

Pure React Plugin#

The React plugin has removed default source.transformImport config for antd v4 and @arco-design/web-react.

Configurations related to the UI library should be provided in the UI library-specific plugins, such as rsbuild-plugin-antd or rsbuild-plugin-arco, and the React plugin will concentrate on providing fundamental abilities for React.

• If your project is using antd v3 or v4, you can manually add the following config:

export default {
  source: {
    transformImport: [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
      },
    ],
  },
};

• If your project is using @arco-design/web-react, you can manually add the following config:

export default {
  source: {
    transformImport: [
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        camelToDashComponentName: false,
        style: 'css',
      },
      {
        libraryName: '@arco-design/web-react/icon',
        libraryDirectory: 'react-icon',
        camelToDashComponentName: false,
      },
    ],
  },
};

JavaScript API#

The loadConfig method now returns both the contents of the config and the path to the config file:

import { loadConfig } from '@rsbuild/core';

// 0.3
const config = await loadConfig();

// 0.4
const { content, filePath } = await loadConfig();