如何为内联文件加载器导入设置 outputPath？

Question

我使用以下代码动态加载 Ace 编辑器：

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');
      })
    })
}

如果我们查看 'ace-builds/webpack-resolver'，我们会看到很多这样的行：

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

如何让 webpack (v4.6)（通过 webpack.config.js）默认将生成的 *.js 模块写入某些子目录中 output.path？

Answer 1

已找到 NormalModuleReplacementPlugin 的解决方案，这只是将 outputPath 添加到内联加载器。

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;
       })
    ]

如何为内联文件加载器导入设置 outputPath？

How to set outputPath for inline file-loader imports?

ace-editor

webpack

webpack-4