How to set outputPath for inline file-loader imports?

Question

I load Ace editor dynamically with following code:

async function loadAceEditor() {
    return import(/* webpackChunkName: "ace", webpackMode: "lazy" */ 'ace-builds/src-noconflict/ace').then(() => {
      return import(/* webpackChunkName: "ace", webpackMode: "lazy" */ 'ace-builds/webpack-resolver').then(()=>{
          return import(/* webpackChunkName: "ace", webpackMode: "lazy" */ './additional-modes/webpack-resolver');
      })
    })
}

And if we will look in 'ace-builds/webpack-resolver' we will see many many lines like this:

ace.config.setModuleUrl('ace/ext/beautify', require('file-loader?esModule=false!./src-noconflict/ext-beautify.js'))

how can I make webpack (v4.6) (via webpack.config.js) to write generated *.js modules in some sub-directory in default output.path?

Answer 1

Have found solution with NormalModuleReplacementPlugin, this just adds outputPath to inline loaders.

plugins: [
       new webpack.NormalModuleReplacementPlugin(/^file-loader\?esModule=false!(.*)/, ( res ) =>{
         const out = res.request.replace(/^file-loader\?esModule=false!/, "file-loader?esModule=false&outputPath=js/ace-modes!");
        // console.log("replacing ", res.request, out);
         res.request = out;
       })
    ]