how does webpack process this module shimming pattern?

Question

webpack's documentation lists an interesting pattern for shimming a module that sets properties on window, like 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')

Applying the pattern to ES6, I ended up with this:

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

I'm trying to understand how Webpack processes this statement, specifically, what role the imports-loader part plays, imports?window=>{}. I understand that the exports-loader basically sets XMODULE to be window.XModule from the dependency. As for the imports-loader, it seems like all it does is not allow the window object to get polluted by the dependency... but how?

How does imports?window=>{} work in conjuction with exports?window.XModule?

Answer 1

I figured out the answer to my question. Firstly, the order of the loaders matters (expose-loader before imports-loader before exports-loader):

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

Regarding the specific example in my question...

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

webpack will run the imports-loader and insert the following at the beginning of the module:

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

webpack will run the exports-loader and insert the following at the end of the module:

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