webpack如何處理此模塊勻場模式？

Question

webpack的文檔列出了一種有趣的模式，用於window.XModule = {...}在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=>{} 。 我知道從依賴項XMODULE ， exports-loader基本上將XMODULE設置為window.XModule 。 至於imports-loader ，似乎它所做的只是不允許window對象被依賴項污染...但是如何？

exports?window.XModule imports?window=>{}如何與exports?window.XModule結合使用？

Answer 1

我想出了我問題的答案。 首先， expose-loader的順序很重要（ 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);