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

【问题标题】：How to set outputPath for inline file-loader imports?如何为内联文件加载器导入设置 outputPath？
【发布时间】：2021-10-01 13:37:31
【问题描述】：

我使用以下代码动态加载 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）在默认 output.path 的某个子目录中编写生成的 *.js 模块？

【问题讨论】：

标签： webpack webpack-4 ace-editor

【解决方案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;
       })
    ]

【讨论】：