@rspack/cli 0.3.4 on Node.js Yarn

Highlight

Internal plugins

To further improve Rspack's compatibility with webpack ecosystem, we implemented internal plugins in Rspack.
For example, you can use rspack.XxxPlugin in your configuration.

const rspack = require('@rspack/core');

module.exports = {
  plugins: [
    new rspack.DefinePlugin({ 'process.env.NODE_ENV': "'production'", }),
    // In addition to webpack's existing plugins, some of the plugins implemented
    // in rust in Rspack are also exported by internal plugins
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
  ],
};

Or use compiler.webpack.XxxPlugin in your plugin.

class ReactRefreshRspackPlugin {
  apply(compiler) {
    const reactRefreshPath = require.resolve("../client/reactRefresh.js");
    const reactRefreshEntryPath = require.resolve("../client/reactRefreshEntry.js");
    new compiler.webpack.EntryPlugin(compiler.context, reactRefreshEntryPath, {
      name: undefined
    }).apply(compiler);
    new compiler.webpack.ProvidePlugin({
      $ReactRefreshRuntime$: reactRefreshPath
    }).apply(compiler);
  }
};

See

@rspack/plugin-react-refresh

Thanks to the implementation of internal plugins, we can now easily implement the @rspack/plugin-react-refresh, which was coupled into @rspack/dev-server before.
Now, if you are using a custom dev server instead of @rspack/dev-server or @rspack/cli, you can easily enable react fast refresh by adding the @rspack/plugin-react-refresh plugin.
See

Compatible with html-webpack-plugin

Rspack is now html-webpack-plugin compatible!

const path = require("node:path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "pug-loader!" + path.join(__dirname, "template.pug")
    })
  ]
}

See

`builtin:swc-loader` supports builtin transformations

These fields served as the alternative to the current builtin transform options, aiming to support transforming with respect to the certain module.

type RspackExperiments = {
  react?: ReactOptions;
  import?: PluginImportOptions;
  emotion?: EmotionOptions;
  relay?: RelayOptions;
};

For example, integrating emotion transformation in the project:

module.exports = {
  module: {
    rules: [
      {
         test: /\.jsx$/,
         exclude: /node_modules/,
         loader: "builtin:swc-loader",
         options: {
            jsc: {
              parser: {
                syntax: "ecmascript",
                jsx: true,
              }
            },
            rspackExperiments: {
              emotion: true
            }
         }
      }
    ]
  }
}

See

What's Changed

Performance Improvements ⚡

perf: optimize process assets by @jerrykingxyz in #4116

Exciting New Features 🎉

feat: flagDependencyUsagePlugin by @IWANABETHATGUY in #4114
feat(core): add cache hits info to stats by @LingyuCoder in #4140
feat: HarmonyExportImportedSpecifierDependency get mode by @underfin in #4141
feat: support builtin:swc-loader experimental transformers by @h-a-n-a in #4133
feat: support stats ids by @ahabhgk in #4148
feat: support function for BannerPlugin by @ahabhgk in #4151
feat: react refresh plugin by @ahabhgk in #4135
feat: expose keepFnNames and keepClassNames options of builtin swc minfier by @xinxinhe1810 in #4121
feat(config): warn while using experiments.newSplitChunks by @hyf0 in #4169
feat(config): only warn while experiments.newSplitChunks being explicitly setted by @hyf0 in #4174
feat: compatible with html-webpack-plugin by @ahabhgk in #4175
feat: combine three tree shaking related plugin, and add corresponding configuration. by @IWANABETHATGUY in #4147
feat: add externalsPresets webAsync target support by @lippzhang in #4184
feat: add boolean type for builtins.html[0].inject by @lippzhang in #3771

Bug Fixes 🐞

fix: console should not appear here by @h-a-n-a in #4145
fix: vue3 hmr by @underfin in #4149
fix: patch sendStats of webpack-dev-server by @h-a-n-a in #4101
fix(css/modules): bump swc version to fix #3875 and add test by @Thiry1 in #4144
fix: ignoreWarnings should work when call stats.getJson by @9aoy in #4153
fix: export client dir in react-refresh-plugin by @ahabhgk in #4164
fix: resolve async css chunk loading promise by @underfin in #4165
fix: chunkLoading false by @underfin in #4167
fix(core): add AbstractMethodError and fix references by @jkzing in #4170
fix: perf regression caused by optimizeTree hook by @ahabhgk in #4185

Other Changes

chore: format PR template by @ahabhgk in #4138
chore: disable sync document when closed merge request by @hardfist in #4142
chore: takedown down monaco-editor example build in ci by @hardfist in #4146
test: snapshot css modules separately by @h-a-n-a in #4155
chore: fix publish problems of react-refresh by @hardfist in #4161
chore: add profile syntax comment by @ahabhgk in #4166
refactor: naming to RspackPlugin by @ahabhgk in #4156
ci: refine artifact publishing by @h-a-n-a in #4178
chore: 🤖 remove unnecessary snapshot files by @IWANABETHATGUY in #4179

Full Changelog: v0.3.2...v0.3.4

@rspack/cli 0.3.4 v0.3.4 on Node.js Yarn