webpack - 如何为内联文件加载器导入设置 outputPath?
问题描述
我使用以下代码动态加载 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 模块?
解决方案
找到了使用 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;
})
]
推荐阅读
- mongodb - How to find a result and apply localization in MongoDB?
- javascript - 为什么找不到':server'和':client'?
- angular - 在 HttpInterceptor 上捕获取消/中止请求。角8
- sql - SQL 按日期获取最接近的值
- mysql - 在 INSERT 上带有触发器的表未锁定以进行 INSERTS
- php - php在上传之前将2个上传的文件重命名为特定名称
- java - 如何捕获异常并存储在 ArrayList 中
- r - 变量 cyl 作为原子向量
- javascript - 从字符串列表创建动态 SVG
- inno-setup - 我可以在 [Setup] 部分使用什么替代方法来代替 Inno Setup 中的自定义消息?