refactor: migrate from webpack to rspack#17
Conversation
chenjiahan
commented
Mar 14, 2026
chenjiahan
commented
- update all imports, types, and configurations to use @rspack/core instead of webpack
- remove webpack dependency and add @rspack/core as a peer dependency
- update tests and documentation to reflect the change to rspack
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request undertakes a significant refactoring effort to transition the project's build system from Webpack to Rspack. The primary goal is to leverage Rspack's performance benefits and modern architecture, ensuring the project remains current with contemporary build tooling. This change impacts core configurations, type definitions, and testing infrastructure, providing a more optimized and potentially faster development experience. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request migrates the project from webpack to rspack, updating dependencies, configurations, types, and documentation accordingly. The changes are generally well-executed. However, I've identified a few areas for improvement. There are several outdated comments in the README that still refer to webpack. Additionally, there's a potentially risky use of an any type cast when handling publicPath which could lead to runtime errors. Finally, there's an inconsistency in how stats colors are handled for multi-compiler mode compared to single-compiler mode. I've provided specific comments and suggestions to address these points.
| const publicPath = options.publicPath | ||
| ? compilation.getPath(options.publicPath) | ||
| ? compilation.getPath(/** @type {any} */ (options.publicPath)) | ||
| : compilation.outputOptions.publicPath | ||
| ? compilation.getPath(compilation.outputOptions.publicPath) | ||
| ? compilation.getPath( | ||
| /** @type {any} */ (compilation.outputOptions.publicPath), | ||
| ) | ||
| : ""; |
There was a problem hiding this comment.
Using an any cast for publicPath is risky because this option can be a function. Passing a function to compilation.getPath will likely cause a runtime error. Please consider adding a type check to handle the case where publicPath is a function, or add a comment explaining why this cast is safe if it is guaranteed to not be a function in practice.
|
|
||
| const compiler = webpack({ | ||
| const compiler = rspack({ | ||
| // webpack options |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| // webpack options | |
| // rspack options |
| const { rspack } = require("@rspack/core"); | ||
|
|
||
| const configuration = { | ||
| /* Webpack configuration */ |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| /* Webpack configuration */ | |
| /* rspack configuration */ |
|
|
||
| const compiler = webpack({ | ||
| const compiler = rspack({ | ||
| /* Webpack configuration */ |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| /* Webpack configuration */ | |
| /* rspack configuration */ |
| const { rspack } = require("@rspack/core"); | ||
|
|
||
| const configuration = { | ||
| /* Webpack configuration */ |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| /* Webpack configuration */ | |
| /* rspack configuration */ |
|
|
||
| const compiler = webpack({ | ||
| const compiler = rspack({ | ||
| /* Webpack configuration */ |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| /* Webpack configuration */ | |
| /* rspack configuration */ |
|
|
||
| const compiler = webpack({ | ||
| const compiler = rspack({ | ||
| /* Webpack configuration */ |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| /* Webpack configuration */ | |
| /* rspack configuration */ |
|
|
||
| const compiler = webpack({ | ||
| const compiler = rspack({ | ||
| // webpack options |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| // webpack options | |
| // rspack options |
|
|
||
| const compiler = webpack({ | ||
| const compiler = rspack({ | ||
| /* Webpack configuration */ |
There was a problem hiding this comment.
For consistency with the migration to rspack, this comment should be updated to refer to rspack instead of webpack.
| /* Webpack configuration */ | |
| /* rspack configuration */ |
| (childStatsOptions) => { | ||
| childStatsOptions = normalizeStatsOptions(childStatsOptions); | ||
|
|
||
| if (typeof childStatsOptions.colors === "undefined") { | ||
| const [firstCompiler] = | ||
| /** @type {MultiCompiler} */ | ||
| (compiler).compilers; | ||
|
|
||
| // TODO remove `colorette` and set minimum supported webpack version is `5.101.0` | ||
| childStatsOptions.colors = | ||
| typeof firstCompiler.webpack !== "undefined" && | ||
| typeof firstCompiler.webpack.cli !== "undefined" && | ||
| typeof firstCompiler.webpack.cli.isColorSupported === | ||
| "function" | ||
| ? firstCompiler.webpack.cli.isColorSupported() | ||
| : require("colorette").isColorSupported; | ||
| } | ||
|
|
||
| return childStatsOptions; | ||
| }, |
There was a problem hiding this comment.
The logic for setting colors on stats options for multi-compiler mode has been removed. This is inconsistent with the single-compiler mode, which still has color detection logic. This could result in stats output without colors in multi-compiler mode. The color detection logic should be added back, simplified to use colorette like in the single-compiler case.
| (childStatsOptions) => { | |
| childStatsOptions = normalizeStatsOptions(childStatsOptions); | |
| if (typeof childStatsOptions.colors === "undefined") { | |
| const [firstCompiler] = | |
| /** @type {MultiCompiler} */ | |
| (compiler).compilers; | |
| // TODO remove `colorette` and set minimum supported webpack version is `5.101.0` | |
| childStatsOptions.colors = | |
| typeof firstCompiler.webpack !== "undefined" && | |
| typeof firstCompiler.webpack.cli !== "undefined" && | |
| typeof firstCompiler.webpack.cli.isColorSupported === | |
| "function" | |
| ? firstCompiler.webpack.cli.isColorSupported() | |
| : require("colorette").isColorSupported; | |
| } | |
| return childStatsOptions; | |
| }, | |
| (childStatsOptions) => { | |
| childStatsOptions = normalizeStatsOptions(childStatsOptions); | |
| if (typeof childStatsOptions.colors === "undefined") { | |
| childStatsOptions.colors = require("colorette").isColorSupported; | |
| } | |
| return childStatsOptions; | |
| } |
There was a problem hiding this comment.
Pull request overview
Migrates this dev-middleware package from the webpack toolchain/types to Rspack by updating runtime code paths, type declarations, tests/snapshots, and documentation accordingly.
Changes:
- Replace
webpackimports/types with@rspack/coreacross source and generated.d.tsfiles. - Update test helpers and Jest setup to use Rspack, including snapshot format/name changes.
- Update package metadata (deps/peerDeps) and README examples for Rspack usage.
Reviewed changes
Copilot reviewed 16 out of 25 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/index.js |
Switch core public types to @rspack/core and adjust watching close typing. |
src/utils/setupHooks.js |
Update stats typing/imports for Rspack and simplify color support detection. |
src/utils/setupOutputFileSystem.js |
Update compiler typing and devServer option checks for Rspack configs. |
src/utils/setupWriteToDisk.js |
Update compiler/compilation typing and devServer option checks. |
src/utils/getPaths.js |
Update stats/asset typing for Rspack and change how assetsInfo is derived. |
types/index.d.ts |
Update exported public types to @rspack/core and add DevServerOption/ClosableWatching. |
types/utils/setupHooks.d.ts |
Switch configuration/compiler/stats types to @rspack/core. |
types/utils/setupOutputFileSystem.d.ts |
Switch multi-compiler type to @rspack/core and re-export DevServerOption. |
types/utils/setupWriteToDisk.d.ts |
Switch compiler types to @rspack/core and re-export DevServerOption. |
types/utils/getPaths.d.ts |
Switch stats/asset types to @rspack/core and update assetsInfo typing. |
test/helpers/runner.js |
Use rspack() instead of webpack() to build compilers for integration tests. |
test/helpers/getCompiler.js |
Use rspack() instead of webpack() for compiler helper. |
test/middleware.test.js |
Update test-side Stats import to come from @rspack/core. |
scripts/globalSetup.js |
Print Rspack version in test setup instead of webpack version. |
jest.config.js |
Remove custom snapshot resolver in favor of Jest defaults. |
test/helpers/snapshotResolver.js |
Remove webpack-versioned snapshot resolver implementation. |
test/__snapshots__/logging.test.js |
Add new snapshot outputs matching Rspack logging format. |
test/__snapshots__/logging.test.js.snap.webpack5 |
Remove old webpack5 snapshot set. |
test/utils/__snapshots__/setupHooks.test.js.snap |
Add/refresh snapshots for updated hook behavior. |
test/utils/__snapshots__/setupWriteToDisk.test.js.snap |
Add/refresh snapshots for updated write-to-disk behavior. |
test/utils/__snapshots__/setupHooks.test.js |
(New) snapshot module file added alongside .snap. |
test/utils/__snapshots__/setupWriteToDisk.test.js |
(New) snapshot module file added alongside .snap. |
package.json |
Remove webpack, add @rspack/core (dev + peer), update package metadata accordingly. |
pnpm-lock.yaml |
Reflect dependency graph changes for @rspack/core and related bindings. |
README.md |
Update usage examples from webpack to rspack. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,387 @@ | |||
| // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing | |||
|
|
|||
| ? compilation.getPath(/** @type {any} */ (options.publicPath)) | ||
| : compilation.outputOptions.publicPath | ||
| ? compilation.getPath(compilation.outputOptions.publicPath) | ||
| ? compilation.getPath( | ||
| /** @type {any} */ (compilation.outputOptions.publicPath), | ||
| ) | ||
| : ""; | ||
| const assetsInfo = new Map( | ||
| compilation.getAssets().map((asset) => [asset.name, asset.info]), | ||
| ); |
| * @param {import("../index.js").FilledContext<Request, Response>} context context | ||
| * @returns {{ outputPath: string, publicPath: string, assetsInfo: Asset["info"] }[]} paths | ||
| * @returns {{ outputPath: string, publicPath: string, assetsInfo: Map<string, Asset["info"]> | undefined }[]} paths | ||
| */ |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 127c767fe0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -0,0 +1,387 @@ | |||
| // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing | |||
There was a problem hiding this comment.
.snap
After removing the custom snapshotResolver, Jest falls back to its default snapshot naming (*.snap), but this commit adds test/__snapshots__/logging.test.js instead; that filename matches testMatch (**/test/**/*.test.js), so Jest treats it as a test file (with no tests) and fails test runs, while snapshot assertions in logging.test.js no longer read this artifact. Renaming it to logging.test.js.snap fixes both problems.
Useful? React with 👍 / 👎.
