npm i expose-loader --save
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.
© 2012–2016 Tobias Koppers
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/expose-loader/