[Bug]: Watch updates whole output files

[Touhami-viseo]

System Info

System:
- OS: Windows 11 10.0.22631
- CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
- Memory: 17.93 GB / 31.68 GB
Binaries:
- Node: 18.20.4 - ~\AppData\Local\fnm_multishells\15100_1728638896208\node.EXE
- npm: 10.7.0 - ~\AppData\Local\fnm_multishells\15100_1728638896208\npm.CMD
Browsers:
- Firefox: 131.0.2
npmPackages:
- @rspack/cli: ^1.0.8 => 1.0.8
- @rspack/core: ^1.0.8 => 1.0.8

Details

Situation:
We are using RSpack for SFRA (Salesforce commerce cloud Reference Architecture). It work very well and allows us to have amazing build and deploy times. SFRA has a particularity that custom developments and extensions by third party vendors are installed in so called cartridges. Cartridges are in fact directories that contain both server side Javascript as well as client side Javascript, SCSS and templates. We use Rspack to look inside all those directories, find SCSS and JS files and compile them. Since commerce cloud is a SaaS, we need to upload those files over to the cloud storage. During development, we use VSCodium with an extension called Prophet debugger that assists us to for file changes and autoupload them to the cloud.

Issue:
When using rspack watch, or even rspack build, the whole static files for each cartridge get updated somehow whenever we edit a file. This update triggers the uploader and it takes for ever to upload the hunders of files generated.

When we were using webpack before, the watch only uploaded the files that were affected and the upload felt instantaneous.

This attached video better demonstrates the video. The upload that usually would take a few milliseconds, now takes minutes.

watcher.mp4

rspack.config.js

// @ts-check

const path = require('path');
const helper = require('./build/webpackHelpers');
const rspack = require('@rspack/core');
const { defineConfig } = require('@rspack/cli');

const jsConfig = (env) => defineConfig({
    output: {
        path: 'redacted/path/to/static/dir'
    },
    performance: {
        hints: false
    },
    name: 'JS',
    devtool: env === 'production' ? false : 'cheap-module-source-map',
    entry: { ...helper.getJsEntries() },
    externals: {
        jquery: 'jQuery',
    },
    resolve: {
        alias: {
            ...helper.getPackageAliases('js'),
            'safe-buffer': path.resolve(__dirname, 'node_modules/safe-buffer'),
            'bn.js': path.resolve(__dirname, 'node_modules/bn.js')
        },
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
            vm: require.resolve('vm-browserify'),
            buffer: require.resolve('buffer'),
        }
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/](bootstrap|lodash|slick-carousel|jquery.panzoom|pace-js|popper.js|gsap|slick)[\\/]/,
                    name: 'default/js/vendors',
                    chunks: 'all'
                }
            }
        },
        minimizer: [
            new rspack.SwcJsMinimizerRspackPlugin({
                extractComments: false,
                minimizerOptions: {
                    minify: true,
                    compress: true,
                    mangle: true,
                    module: true,
                }
            })
        ]
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'builtin:swc-loader',
                }
            }
        ]
    },
    plugins: [
        new rspack.CopyRspackPlugin({
            patterns: [/* redacted list of static files to copy */]
        })
    ]
});

const scssConfig = (env) => defineConfig({
    output: {
        path: 'redacted/path/to/static/dir/same/as/js'
    },
    performance: {
        hints: false
    },
    name: 'SCSS',
    devtool: false,
    entry: { ...helper.getScssEntries() },
    resolve: {
        alias: {
            ...helper.getPackageAliases('scss')
        }
    },
    optimization: {
        removeEmptyChunks: true,
        minimizer: [
            new rspack.LightningCssMinimizerRspackPlugin(),
        ]
    },
    plugins: [
        new rspack.CssExtractRspackPlugin(),
        new rspack.CopyRspackPlugin({
            patterns: [/* redacted list of font files to copy */]
        })
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    rspack.CssExtractRspackPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { url: false }
                    },
                    {
                        loader: 'builtin:lightningcss-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            api: 'modern-compiler',
                            implementation: require("sass-embedded"),
                            sassOptions: {
                                quietDeps: true,
                                silenceDeprecations: ['mixed-decls', 'slash-div', 'color-functions'],
                                loadPaths: [path.resolve('node_modules/flag-icon-css/sass')],
                                includePaths: [path.resolve('node_modules/flag-icon-css/sass')]
                            }
                        }
                    }
                ]
            }
        ]
    }
});

module.exports = (env) => [
    jsConfig(env),
    scssConfig(env),
];

Reproduce link

No response

Reproduce Steps

Given configuration provided in details section:

1. Have VSCodium or VSCode with 'Prophet debugger' installed
2. Enable watch and upload file changes
3. Run npm run watch.
4. Save a Client JS or SCSS file
5. Observe uploader file watcher reuploads whole hunders of files one by one which takes forever

[LingyuCoder]

Lack of sufficient information makes it difficult to locate the problem.

Did the content of those output files changed? Or their last modified time/create time changed?

[Touhami-viseo]

@LingyuCoder The real content did not change. However, their last modified time/create time does change. Another test I did:

1. Run npm run build to trigger a regular build
2. Go to output directory and add a comment to random a file in there.
3. Do not change any file in the source directory
4. Run npm run build again
5. Observe that the comment in file a has disapeared
6. Observe timestamps as reported by ls -l have changed.

Given that file B generate file b and file A generate file a, the same happens in watch mode:

1. Launch npm run watch to trigger watch mode build
2. Add random comment to output file a.
3. Edit file B
4. Do absolutely not touch file A
5. Observe that random comment immediately disappears from file a.

[LingyuCoder]

Need to align the file writing logic with webpack.