webpack 如何处理这个模块填充模式?

how does webpack process this module shimming pattern?

webpack 的文档列出了一个有趣的模式,用于填充在 window 上设置属性的模块,例如 window.XModule = {...}.

https://webpack.github.io/docs/shimming-modules.html#the-file-sets-a-property-on-window-window-xmodule

require('imports?window=>{}!exports?window.XModule!./file.js')

将模式应用到 ES6,我得到了这个:

import XMODULE from 'imports?window=>{}!exports?window.XModule!./file.js'

我试图了解 Webpack 如何处理此语句,具体来说,imports-loader 部分扮演什么角色,imports?window=>{}。我知道 exports-loader 基本上将 XMODULE 设置为 window.XModule 来自依赖项。至于 imports-loader,似乎它所做的只是不允许 window 对象被依赖项污染...但是如何呢?

imports?window=>{} 如何与 exports?window.XModule 结合使用?

我找到了问题的答案。首先,加载程序的顺序很重要(expose-loader 之前 imports-loader 之前 exports-loader):

https://webpack.github.io/docs/shimming-modules.html#order-of-loaders

关于我问题中的具体例子...

'imports?window=>{}!exports?window.XModule!./file.js'

webpack 将 运行 imports-loader 并在模块的开头插入以下内容:

/*** IMPORTS FROM imports-loader ***/
var window = {};

webpack 将 运行 exports-loader 并在模块末尾插入以下内容:

/*** EXPORTS FROM exports-loader ***/
exports["XModule"] = (window.XModule);