node modules - Webpack replace require with public path

Question

I want to manually parse source maps to do some stack trace manipulation. For that I use the popular source-map module.

To run that module in the browser I have to pass it the path to the web assembly. Such as*:

require("source-map/lib/mappings.wasm");

sourceMap.SourceMapConsumer.initialize({
    "lib/mappings.wasm": "lib/mappings.wasm"
});

* This is pseudocode as I am actually using Scala.js but that is irrelevant to the question.

I have configured webpack to copy that file:

      test: /.wasm$/,
      type: 'javascript/auto',
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'lib',
            publicPath: 'lib'
          }
        }
      ]

This all works great.

What I would like to know whether I can get webpack to replace a require with the public path? Something like:

sourceMap.SourceMapConsumer.initialize({
    "lib/mappings.wasm": require("source-map/lib/mappings.wasm");
)}

I've seen some funky looking require statements like require("file-loader!source-map/lib/mappings.wasm") but I don't know what that syntax is. Is there documentation on that?

question from:https://stackoverflow.com/questions/65915036/webpack-replace-require-with-public-path

Answer 1

So I kept looking at more documentation of loaders and realised that the file-loader might already be doing exactly what I suggested and sure enough it was. I supposed this is obvious to experienced webpack users but it was not at all obvious to me.

So the solution is to do:

sourceMap.SourceMapConsumer.initialize({
    "lib/mappings.wasm": require("source-map/lib/mappings.wasm");
)}

What does NOT work is trying to specify the type of loader as in:

sourceMap.SourceMapConsumer.initialize({
    "lib/mappings.wasm": require("file-loader!source-map/lib/mappings.wasm");
)}

For whatever reason this uses the hashed name instead of the real public path which is wrong.