[Feature]: Option to inline web workers!

[zardoy]

What problem does this feature solve?

Hello! Opening this issue for https://github.com/web-infra-dev/rsbuild/issues/3240#issuecomment-2295454799

Context

https://rsbuild.dev/config/output/inline-scripts#async-chunks says that dynamicImportMode: 'eager' should not generate async chunks anymore, however when importing workers like

const worker = new Worker(new URL('test.worker.ts', import.meta.url))
worker.postMessage('hello')
worker.onmessage = (e) => {
  console.log(e.data)
}

It still produces an HTML file and a single async chunk which is the worker.

Unfortunately I'm not good with understanding webpack options, but I also tried configuring loader like that (which also didn't work unfortunately)

rspack: {
    resolveLoader: {
        alias: {
            'worker-loader': require.resolve('worker-rspack-loader')
        },
    },
    module: {
        rules: [
            {
                test: /\.worker\.{js,ts}$/,
                loader: 'worker-rspack-loader',
                options: { inline: 'no-fallback' }
            }
        ],
    },
}

What does the proposed API look like?

I think web workers should be inlined when dynamicImportMode = eager

Context: FYI in my case half of workers are generated by esbuild (yes I'm using npm-run-all) and I inline them manually, but now I'm in transition to rebuild and AFAIS it still doesn't support it. Thanks in advance!

[9aoy]

The dynamicImportMode configuration is ineffective for the worker constructor, and the built-in Worker in Rspack does not yet support inline. You can use worker-rspack-loader, referring to this example.

[9aoy]

By the way, you can subscribe to this issue to get more discussions about inline worker. 👉 https://github.com/webpack/webpack/issues/19098

[zardoy]

The dynamicImportMode configuration is ineffective for the worker constructor, and the built-in Worker in Rspack does not yet support inline. You can use worker-rspack-loader, referring to this example.

@9aoy Hm, I'm so sorry for coming back late. Just tried your example, but unfortunately, its behavior is different from the built-in one, and it doesn't work with TypeScript. I know this question might be off-topic a bit, but is there a way to make your work with the TS worker files? I tried ts-loader which didn't work so I believe some other way should be used instead...

(just in case I'm trying to make a working example of it here: https://github.com/zardoy/rsbuild-workers-repro any guidance would be appreciated :)

Also, it seems that example doesn't work with js modules imported from node_modules either

[TianJianJun0727]

同样碰到这类问题，试了很多方案都不行

[zardoy]

同样碰到这类问题，试了很多方案都不行

I can understand you, I also don't see any available solution with rsbuild. Right now I'm mixing bundlers so worker imported with that plugin is a prepared output file. Thats a ton of pain and memory waste but seems the only way right now