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";
// For compatibility with older Node.js versions
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"],
});« Previous
ProgressPluginNext »
SourceMapDevToolPlugin5 Contributors
