expose-loader

Install

npm i expose-loader --save

Usage

Note: Modules must be require()'d within in your bundle, or they will not be exposed.

require("expose-loader?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available.

This line works to expose React to the web browser to enable the Chrome React devtools:

require("expose-loader?React!react");

Thus, window.React is then available to the Chrome React devtools extension.

Alternately, you can set this in your config file:

webpack v1 usage

module: {
  loaders: [
    { test: require.resolve("react"), loader: "expose-loader?React" }
  ]
}

webpack v2 usage

module: {
  rules: [{
          test: require.resolve('react'),
          use: [{
              loader: 'expose-loader',
              options: 'React'
          }]
      }]
}

Also for multiple expose you can use ! in loader string:

webpack v1 usage

module: {
  loaders: [
    { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },
  ]
}

webpack v2 usage

module: {
  rules: [{
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: 'jQuery'
          },{
              loader: 'expose-loader',
              options: '$'
          }]
      }]
}

The require.resolve is a node.js call (unrelated to require.resolve in webpack processing -- check the node.js docs instead). require.resolve gives you the absolute path to the module ("/.../app/node_modules/react/react.js"). So the expose only applies to the react module. And it's only exposed when used in the bundle.

Documentation: Using loaders