how to modify the module content in webpack plugin?

[HomyeeKing]

In Short, I want the thing like load hook in rollup, but I still don't make it in webpack 😓(even with the help of the mainstream LLM chat bot).

// src/index.js
import { a } from 'virtual:test'; // write a plugin to load it
console.log('a', a);

Here's the repo to repreduce, and the plugin is in plugins/virtualPlugin.js

Anyone help with this?

[alexander-akait]

You don't need a plugin here, just use https://github.com/webpack-contrib/val-loader/ with test: /^virtual:.+/ and generate required code

[HomyeeKing]

Thanks for reply.
Firstly, the virtual:test is just one examaple, what I need is the ability to be able modify the content with the given importer.
And I also try the val-loader, it reminds me of the fact that in this case virtual: is a scheme, so will emit this error:

You can use this repo to reproduce.

I have solved this question by referring the implementation of data: from https://github.com/webpack/webpack/blob/main/lib/schemes/DataUriPlugin.js#L61-L63

 compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation, { normalModuleFactory }) => {
      NormalModule.getCompilationHooks(compilation)
        .readResource.for('virtual')
        .tap(PLUGIN_NAME, () => {
         return 'the modified content'
        });
      normalModuleFactory.hooks.beforeResolve.tap(PLUGIN_NAME, (resolveData) => {
        if (resolveData.request === 'virtual:assets-manifest.json') {
          resolveData.assertions = {
            type: 'json',
          };
        }
      });
    });

Not sure if it's a right way.

[alexander-akait]

Firstly, the virtual:test is just one examaple, what I need is the ability to be able modify the content with the given importer.
And I also try the val-loader, it reminds me of the fact that in this case virtual: is a scheme, so will emit this error:

If you really want to use virtual: as a pseudo protocol you can look at our plugin and how we resolve - https://github.com/webpack/webpack/blob/main/lib/schemes/DataUriPlugin.js, you can find file: and http(s): protocols too, so as I see above you already found how we implemented schemes support

And your solution is right, only one - I recommend to use normalModuleFactory.hooks.resolveForScheme