웹팩 공식 샵 을 방문하여 의류를 구매하시고 웹팩을 후원해주세요!   모든 후원의 진행사항은 웹팩의 오픈 챌린지 페이지 에서 확인하실 수 있습니다.

ag-grid is proud to partner with webpack

ProvidePlugin

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.

Usage: jQuery

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"

Usage: jQuery with Angular 1

Angular looks for window.jQuery in order to determine whether jQuery is present, see the source code.

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
})

Usage: Lodash Map

new webpack.ProvidePlugin({
  _map: ['lodash', 'map']
})

Usage: Vue.js

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
})

Contributors