ProvidePlugin

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

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

또는

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

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

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

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

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