Automatically load modules instead of having to import
or require
them everywhere.
new webpack.ProvidePlugin({ identifier: 'module1', // ... });
or
new webpack.ProvidePlugin({ identifier: ['module1', 'property1'], // ... });
Whenever the identifier
is encountered as free variable in a module, the module
is loaded automatically and the identifier
is filled with the exports of the loaded module
(of property
in order to support named exports).
For importing the default export of an ES2015 module, you have to specify the default property of module.
To automatically load jquery
we can simply point both variables it exposes to the corresponding node module:
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' });
Then in any of our source code:
// in a module $('#item'); // <= just works jQuery('#item'); // <= just works // $ is automatically set to the exports of module "jquery"
Angular looks for window.jQuery
in order to determine whether jQuery is present, see the source code.
new webpack.ProvidePlugin({ 'window.jQuery': 'jquery' });
new webpack.ProvidePlugin({ _map: ['lodash', 'map'] });
new webpack.ProvidePlugin({ Vue: ['vue/dist/vue.esm.js', 'default'] });
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/plugins/provide-plugin