webpack-exposer

This is a simple module to expose internal __webpack_<insert name here>__ functions.

Works with webpack >= 2, best suited with NamedModulesPlugin

Explaination

Each webpack module is wrapped with this higher-level function scope:

(function(module, exports, __webpack_require__) {
  var moduleA = __webpack_require__(<name or id>)
  var moduleB = __webpack_require__(<name or id>)
  ...
})

__webpack_require__ is global until an unknown time later. This little hack attempts to recover this behavior by exposing __webpack_require__ using arguments object and the module system:

(function(module, exports, __webpack_require__) {
  (function (module, exports, wr) {
    ...
  })(arguments[0], arguments[1], arguments[2])
})

Which the arguments should subsitute equivalently. Then __webpack_require__ will be global once again, some other objects are also exposed, so there are many rooms for hacking, for example dynamic (external) module loading or module hooking.

I cannot just unwrap this function because I observed only one argument will be available. I don't know the exact reason for this.

Usage

Just import or require this file/module in your index/main file:

import 'webpack-exposer'

// equivalently
require('webpack-exposer')

If __webpack_require__ is correctly supplied, window.__webpack_require__ and window.require (and a big list of other things) will be available!

Ten cents

Add NamedModulesPlugin to your webpack setup to not get an obscured integer ID, for the sake of easy hacking! This even works for non-HMR/development environment and the result set in __webpack_modules__ are drastically different!

const { NamedModulesPlugin } = require('webpack')

module.exports = {
  ...
  plugins: [
    ...
    new NamedModulesPlugin()
  ]
}