externals
옵션은 출력 번들에서 의존성을 제외하는 방법을 제공합니다. 대신, 생성된 번들은 소비자(모든 최종 사용자 애플리케이션)의 환경에 존재하기 위해 해당 의존성에 의존합니다. 이 기능은 일반적으로 라이브러리 개발자에게 가장 유용하지만, 이것을 위한 다양한 애플리케이션이 있습니다.
string
object
function
RegExp
[string, object, function, RegExp]
특정 import
된 패키지의 번들링을 방지하고 대신 런타임에 이러한 외부 종속성을 검색합니다.
예를 들어, 번들링 대신 CDN에서 jQuery를 포함하려면 다음을 수행해야 합니다.
index.html
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous"
></script>
webpack.config.js
module.exports = {
//...
externals: {
jquery: 'jQuery',
},
};
이렇게 하면 종속 모듈이 변경되지 않습니다. 즉, 아래 표시된 코드가 계속 작동합니다.
import $ from 'jquery';
$('.my-element').animate(/* ... */);
외부 종속성이 있는 번들은 CommonJS, AMD, global 그리고 ES2015 모듈과 같은 다양한 모듈 컨텍스트에서 사용할 수 있습니다. 외부 라이브러리는 다음 형식 중 하나로 사용할 수 있습니다.
module.exports.default
입니다.commonjs
와 유사하지만, AMD 모듈 시스템을 사용합니다.다음 구문이 허용됩니다.
위의 예를 참고하세요. 프로퍼티 이름 jquery
는 import $ from 'jquery'
에서 jquery
모듈이 제외되어야 함을 나타냅니다. 이 모듈을 대체하기 위해, jQuery
값을 사용하여 전역 jQuery
변수를 검색합니다. 즉, 문자열이 제공되면 위와 아래에 정의된 root
로서 처리됩니다.
반면에, CommonJS 모듈로 사용 가능한 라이브러리를 외부화하려는 경우, 라이브러리 이름과 유형을 제공할 수 있습니다.
예를 들어, 출력 번들에서 fs-extra
번들을 제외하고 대신 런타임 중에 가져오려면, 다음과 같이 지정할 수 있습니다.
module.exports = {
// ...
externals: {
'fs-extra': 'commonjs2 fs-extra',
},
};
이렇게 하면 종속 모듈이 변경되지 않습니다. 예. 아래 표시된 코드.
import fs from 'fs-extra';
다음과 같이 컴파일됩니다.
const fs = require('fs-extra');
module.exports = {
//...
externals: {
subtract: ['./math', 'subtract'],
},
};
subtract: ['./math', 'subtract']
을 사용하면 commonjs 모듈의 일부를 선택할 수 있으며, 여기서 ./math
는 모듈이고 번들에는 subtract
변수 아래의 하위 집합만 필요합니다. 이 예제는 require('./math').subtract;
로 번역됩니다.
module.exports = {
//...
externals: {
react: 'react',
},
// 또는
externals: {
lodash: {
commonjs: 'lodash',
amd: 'lodash',
root: '_', // 전역 변수를 나타냅니다.
},
},
// 또는
externals: {
subtract: {
root: ['math', 'subtract'],
},
},
};
이 구문은 외부 라이브러리를 사용할 수 있는 모든 가능한 방법을 설명하는 데 사용됩니다. 여기서 lodash
는 AMD 및 CommonJS 모듈 시스템에서 lodash
로 사용할 수 있지만 전역 변수 형식에서는 _
로 사용할 수 있습니다. 여기서 subtract
는 전역 math
객체 아래의 subtract
속성을 통해 사용할 수 있습니다. (예. window['math']['subtract']
)
function ({ context, request, contextInfo, getResolve }, callback)
function ({ context, request, contextInfo, getResolve }) => promise
5.15.0+webpack에서 외부화하려는 동작을 제어하기 위해 자체 함수를 정의하는 것이 유용할 수 있습니다. 예를 들어 webpack-node-externals는, node_modules
디렉터리에서 모든 모듈을 제외하고 패키지를 허용 목록에 추가하는 옵션을 제공합니다.
함수가 받을 수 있는 인수는 다음과 같습니다.
ctx
(object
): 파일 세부 정보를 포함하는 객체입니다.ctx.context
(string
): import를 포함하는 파일의 디렉터리입니다.ctx.request
(string
): 요청 중인 import 경로입니다.ctx.contextInfo
(string
): issuer(예. 레이어)에 대한 정보를 포함합니다.ctx.getResolve
5.15.0+: 현재 리졸브 옵션으로 리졸브 함수 가져오기.callback
(function (err, result, type)
): 모듈을 외부화하는 방법을 나타내는 데 사용되는 콜백 함수입니다.콜백 함수는 세 가지 인수를 사용합니다.
err
(Error
): import를 외부화하는 동안 오류가 있었는지 나타내는 데 사용됩니다. 오류가 있는 경우 이 파라미터만 사용해야 합니다.result
(string
[string]
object
): 외부 모듈을 설명합니다. ${type} ${path}
형식의 문자열 또는 다른 표준 외부 형식(string
, [string]
, 또는 object
) 중 하나를 허용할 수 있습니다.type
(string
): 모듈 유형을 나타내는 선택적 파라미터입니다(result
파라미터에 아직 표시되지 않은 경우).예를들어, import 경로가 정규 표현식과 일치하는 모든 import를 외부화 하려면 다음을 수행할 수 있습니다.
webpack.config.js
module.exports = {
//...
externals: [
function ({ context, request }, callback) {
if (/^yourregex$/.test(request)) {
// 요청 경로를 사용하여 commonjs 모듈로 외부화
return callback(null, 'commonjs ' + request);
}
// import를 외부화하지 않고 계속
callback();
},
],
};
다른 모듈 형식을 사용하는 다른 예제입니다.
webpack.config.js
module.exports = {
externals: [
function (ctx, callback) {
// external은 `@scope/library`에 있는 `commonjs2` 모듈입니다.
callback(null, '@scope/library', 'commonjs2');
},
],
};
webpack.config.js
module.exports = {
externals: [
function (ctx, callback) {
// external은 `nameOfGlobal`이라는 전역 변수입니다.
callback(null, 'nameOfGlobal');
},
],
};
webpack.config.js
module.exports = {
externals: [
function (ctx, callback) {
// external은 `@scope/library` 모듈에서 명명된 export입니다.
callback(null, ['@scope/library', 'namedexport'], 'commonjs');
},
],
};
webpack.config.js
module.exports = {
externals: [
function (ctx, callback) {
// external은 UMD 모듈입니다.
callback(null, {
root: 'componentsGlobal',
commonjs: '@scope/components',
commonjs2: '@scope/components',
amd: 'components',
});
},
],
};
주어진 정규식과 일치하는 모든 의존성은 출력 번들에서 제외됩니다.
webpack.config.js
module.exports = {
//...
externals: /^(jquery|\$)$/i,
};
이 경우, jQuery
, 대문자 여부, 또는 $
라는 종속성이 외부화됩니다.
때때로 위의 구문을 조합하여 사용할 수 있습니다. 다음과 같은 방식으로 수행할 수 있습니다.
webpack.config.js
module.exports = {
//...
externals: [
{
// String
react: 'react',
// Object
lodash: {
commonjs: 'lodash',
amd: 'lodash',
root: '_', // 전역 변수를 나타냅니다.
},
// [string]
subtract: ['./math', 'subtract'],
},
// Function
function ({ context, request }, callback) {
if (/^yourregex$/.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
},
// Regex
/^(jquery|\$)$/i,
],
};
이 설정을 사용하는 방법에 대한 자세한 내용은, 라이브러리 작성 방법에 대한 문서를 참고하십시오.
function
object
레이어별로 external을 지정합니다.
webpack.config.js
module.exports = {
externals: {
byLayer: {
layer: {
external1: 'var 43',
},
},
},
};
string = 'var'
기본 외부 유형을 지정합니다. amd
, umd
, system
그리고 jsonp
external은 output.libraryTarget
이 동일한 값으로 설정되는 것에 의존합니다. 예. amd
라이브러리 내에서만 amd
external을 사용할 수 있습니다.
지원 유형:
'amd'
'amd-require'
'assign'
'commonjs'
'commonjs-module'
'global'
'import'
- import()
를 사용하여 네이티브 EcmaScript 모듈을 로드합니다(비동기 모듈)'jsonp'
'module'
'node-commonjs'
'promise'
- 'var'
과 동일하지만, 결과를 기다립니다(비동기 모듈)'self'
'system'
'script'
'this'
'umd'
'umd2'
'var'
'window'
webpack.config.js
module.exports = {
//...
externalsType: 'promise',
};
외부의 기본 유형을 'module'
로 지정하세요. Webpack은 모듈에서 사용되는 외부 요소에 대해 import * as X from '...'
와 같은 코드를 생성합니다.
우선 experiments.outputModule
을 활성화해야 합니다. 그렇지 않으면 webpack에서 오류가 발생합니다.
webpack.config.js
module.exports = {
experiments: {
outputModule: true,
},
externalsType: 'module',
};
외부의 기본 유형을 'node-commonjs'
로 지정하세요. Webpack은 모듈에서 사용되는 외부 요소를 로드하기 위한 require 함수를 구성하기 위해 'module'
에서 createRequire
를 가져올 것입니다.
module.export = {
experiments: {
outputModule: true,
},
externalsType: 'node-commonjs',
};
외부의 기본 유형을 'script'
로 지정하세요. Webpack은 HTML의 <script>
요소로 미리 정의된 전역 변수를 노출하는 스크립트로 외부를 로드합니다. <script>
태그는 스크립트가 로드된 후 제거됩니다.
module.exports = {
externalsType: 'script',
externals: {
packageName: [
'http://example.com/script.js',
'global',
'property',
'property',
], // 프로퍼티는 선택 사항입니다.
},
};
프로퍼티를 지정하지 않을 경우 바로 가기 구문을 사용할 수도 있습니다.
module.exports = {
externalsType: 'script',
externals: {
packageName: 'global@http://example.com/script.js', // 여기엔 프로퍼티가 없습니다
},
};
output.publicPath
는 제공된 URL에 추가되지 않습니다.
CDN에서 lodash
를 로드해 보겠습니다.
webpack.config.js
module.exports = {
// ...
externalsType: 'script',
externals: {
lodash: ['https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js', '_'],
},
};
그런 다음 코드에서 사용합니다.
import _ from 'lodash';
console.log(_.head([1, 2, 3]));
위의 예제 코드를 위해 다음과 같이 프로퍼티를 지정해야 합니다.
module.exports = {
// ...
externalsType: 'script',
externals: {
lodash: [
'https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js',
'_',
'head',
],
},
};
로컬 변수 head
와 전역 window._
는 import
lodash
를 사용할 때 노출됩니다.
import head from 'lodash';
console.log(head([1, 2, 3])); // 여기 로그는 1 입니다
console.log(window._.head(['a', 'b'])); // 여기 로그는 a 입니다
object
특정 대상에 대한 외부 프리셋 설정을 활성화합니다.
Option | Description | Input Type |
---|---|---|
electron | electron , ipc 또는 shell 과 같은 main 및 preload 컨텍스트에서 공통 일렉트론 내장 모듈을 외부로 취급하고, 사용 시 require() 를 통해 로드합니다. | boolean |
electronMain | app , ipc-main 또는 shell 과 같은 같은 주 컨텍스트에서 일렉트론 내장 모듈을 외부로 취급하고, 사용 시 require() 를 통해 로드합니다. | boolean |
electronPreload | web-frame , ipc-renderer 또는 shell 과 같은 사전 로드 컨텍스트에서 일렉트론 내장 모듈을 외부로 취급하고, 사용 시 require()를 통해 로드합니다. | boolean |
electronRenderer | web-frame , ipc-renderer 또는 shell 과 같은 렌더러 컨텍스트에서 일렉토론 내장 모듈을 외부로 취급하고, 사용 시 require() 를 통해 로드합니다. | boolean |
node | fs , path 또는 vm 과 같은 node.js 내장 모듈을 외부 모듈로 취급하고, 사용 시 require() 를 통해 로드합니다. | boolean |
nwjs | NW.js 레거시 nw.gui 모듈을 외부 모듈로 취급하고, 사용 시 require() 를 통해 로드합니다. | boolean |
web | http(s)://... 그리고 std:... 에 대한 참조를 외부로 취급하고, 사용 시 import 를 통해 로드합니다 (청크의 다른 코드보다 먼저 외부가 실행되므로 실행 순서가 변경됩니다). | boolean |
webAsync | http(s)://... 그리고 std:... 에 대한 참조를 외부로 취급하고, 사용 시 async import() 를 통해 로드합니다 (이 유형의 외부 모듈은 async 모듈이며, 실행에 다양한 영향을 미칩니다). | boolean |
node.js 관련 프리셋으로 ES 모듈을 출력하려는 경우, webpack은 기본externalsType
을 node-commonjs
로 설정하여, require()
를 사용하는 대신 require 함수를 구성하기 위해 createRequire
를 사용합니다.
Example
node
프리셋을 사용하면 내장 모듈을 번들로 묶지 않고 외부 모듈로 취급하고 사용할 때 require()
를 통해 로드합니다.
webpack.config.js
module.exports = {
// ...
externalsPresets: {
node: true,
},
};