File watch mode.

[boldurean]

What problem does this feature solve?

There is no way to turn on watch mode analogue to webpack --watch for just transpile jsx and output it to folder.

Imagine people are not running client dev server but they still need to transpile .jsx/.tsx files and output them to the dist directory. This problem happens when project is configured with other backend frameworks like ASP.NET which runs razor templates.

What does the proposed API of configuration look like?

rspack --watch - will just watch file changes and will translie&output to the "output" folder once files change.

[bekharsky]

There is more. Documentation states that Rspack provides watch mode: https://www.rspack.dev/config/watch.html#watch

But when I try to use that, I got an error:

$ yarn rs-dev      
yarn run v1.22.0
$ NODE_ENV=development rspack
(node:38802) DeprecationWarning: A 'callback' argument needs to be provided to the 'rspack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
Hash: 45a2d73d002b786a

[boldurean]

@SoonIter I think what build --watch do is to rebuild including optimize and split chunks for production. The actual issue is that rspack doesn't have a watch mode for development. All it's has to do is replicate webpack --watch command not build --watch otherwise it will rebuild entire app including dependencies after every file change which is overhead. Vite has something similar and it's redundant.

[SoonIter]

I think I know what you mean. I don't use this command very often. Do webpack watch , webpack --watch and wepack build --watch have the same behavior?

[h-a-n-a]

@boldurean The status quo of Rspack does not align with webpack, which I think is a mistake. Webpack, by default, will respect the environment variables and mode, etc, however, it is hardcoded https://github.com/web-infra-dev/rspack/blob/deaca70c01a84c83f2d54fe6b3e2375ebed8b32e/packages/rspack-cli/src/commands/build.ts#L96. Would you take a look at this again @SoonIter?

[boldurean]

@h-a-n-a yep, I respect the targets and totally agree with them. I just find rspack very perspective and want as more people use it especially those like me who cannot shut down webpack from their production because non of the other current solutions provide same functionality.

Let me try to explain the problem that can be solved if this feature will be included.

Lots backend frameworks provide their dev server. As an example ASP.NET core has .cshtml embedded templates and run those in the memory. So you cannot point to the index.html file from the client side. All you have to do is to run the bundler on the client in --watch mode in order to watch for file changes and output them to the selected directory as per config file. This mode doesn't require any build optimizations it just need to input some .jsx/.tsx/js/ts files transpile -> output. Webpack has this feaute built in. So we can write wepback --watch pointing to the dev config ant it will watch for file changes and output the changed one and all affected in the chain. Output files can be still configured like [name].[hash].ext but the main idea is that actually it outputs files to the destination.

[boldurean]

I think I know what you mean. I don't use this command very often.

Do webpack watch , webpack --watch and wepack build --watch have the same behavior?

Not really. Looks like build --watch rebuilds project entirely for example if my build takes 10s after adding one line of the code it will take "production" config and will rebuild everything which is 10s again. In the webpack --watch mode it will transpile all files and then once I chage one the only affected will be transpiled which takes 0.0n second's depending of machine capabilities.

[SoonIter]

Thank you for your feedback. We already have this feature config/cache.html, However, the stdout is a little different, and then there are some problems with the "NODE_ENV" environment. I would fix this.

[boldurean]

@SoonIter thank you!