expose-loader
expose-loader
The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.
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.
For example, let's say you want to expose jQuery as a global called $
:
require("expose-loader?$!jquery");
Thus, window.$
is then available in the browser console.
Alternately, you can set this in your config file:
webpack v1 usage
module: { loaders: [ { test: require.resolve("jquery"), loader: "expose-loader?$" } ] }
webpack v2 usage
module: { rules: [{ test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: '$' }] }] }
Let's say you also want to expose it as window.jQuery
in addition to window.$
. 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). 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.
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/expose-loader