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对象被依赖项污染……但是怎么做呢？

结合exports?window.XModule，imports?window=>{}是如何工作的

Answer 1

我找到了我问题的答案。首先，加载器的顺序很重要(在imports-loader之前是expose-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);