ProvidePlugin

모듈을 import 또는 require 할 필요 없이 자동으로 로드합니다.

new webpack.ProvidePlugin({
  identifier: 'module1',
  // ...
});

또는

new webpack.ProvidePlugin({
  identifier: ['module1', 'property1'],
  // ...
});

기본적으로, 모듈 해석 경로는 현재 폴더 (./**)와 node_modules입니다.

또한 전체 경로도 지정할 수 있습니다.

const path = require('path');

new webpack.ProvidePlugin({
  identifier: path.resolve(path.join(__dirname, 'src/module1')),
  // ...
});

모듈에서 자유 변수로 식별자를 만날 때마다 모듈이 자동으로 로드되고, 식별자가 로드된 모듈의 exports(혹은 지정된 exports를 돕기 위한 프로퍼티)로 채워집니다.

ES2015 모듈의 기본 export를 가져오려면 모듈의 기본 프로퍼티를 지정해야 합니다.

Usage: jQuery

jquery를 자동으로 로드하려면 해당 노드 모듈에 노출되는 두 변수를 모두 가리킬 수 있습니다.

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});

소스 코드 중 어느 것이라도 동일합니다.

// 모듈에서
$('#item'); // <= 동작합니다.
jQuery('#item'); // <= 이 또한 동작합니다.
// $는 모듈 "jquery" exports로 자동 설정되었습니다.

Usage: jQuery with Angular 1

Angular는 jQuery가 존재하는지 찾기 위해 window.jQuery를 찾습니다. 소스 코드를 참고하세요.(https://github.com/angular/angular.js/blob/v1.5.9/src/Angular.js#L1821-L1823).

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'],
});