javascript - webpack 如何处理这个模块匀场模式？

Question

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？

Answer 1

我想出了我的问题的答案。首先，加载程序的顺序很重要（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);