Externals

externals 옵션은 출력 번들에서 의존성을 제외하는 방법을 제공합니다. 대신, 생성된 번들은 소비자(모든 최종 사용자 애플리케이션)의 환경에 존재하기 위해 해당 의존성에 의존합니다. 이 기능은 일반적으로 라이브러리 개발자에게 가장 유용하지만, 이것을 위한 다양한 애플리케이션이 있습니다.

externals

string RegExp object ExternalsFn (string | RegExp | object | ExternalsFn)[]

특정 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

export default {
  // ...
  externals: {
    jquery: "jQuery",
  },
};

이렇게 하면 종속 모듈이 변경되지 않습니다. 즉, 아래 표시된 코드가 계속 작동합니다.

import $ from "jquery";

$(".my-element").animate(/* ... */);

위의 webpack.config.js에서 externals에 지정된 속성 이름 jquery는 import $ from 'jquery'의 모듈인 jquery가 번들링에서 제외되어야 함을 나타냅니다. 이 모듈을 대체하기 위해 jQuery값이 전역 jQuery변수를 검색하는 데 사용됩니다. output.library.type과 output.module 모두 설정되지 않은 경우 기본 외부 라이브러리 유형은 var입니다. externalsType를 참고하세요.

위에서는 외부 전역 변수를 사용하는 예를 보여주었지만, 실제로 외부 속성에는 전역변수, CommonJS, AMD, ES2015 모듈과 같은 형식으로 사용할 수 있습니다. 자세한 내용은 externalsType을 참고하세요.

string

externalsType에 따라 전역 변수('global', 'this', 'var', 'window')의 이름이 될 수 있습니다. 또는 모듈 이름 (amd, commonjs, module, umd)을 참고하세요.

1개의 외부 속성만 정의하는 경우에도 축약된 구문을 사용할 수 있습니다.

export default {
  // ...
  externals: "jquery",
};

이는 아래와 동일합니다.

export default {
  // ...
  externals: {
    jquery: "jquery",
  },
};

${externalsType} ${libraryName} 구문을 사용하여 외부에 외부 라이브러리 유형을 지정할 수 있습니다. 이는 externalsType옵션에 지정된 기본 외부 라이브러리 유형을 재정의합니다.

예를들어 외부 라이브러리가 CommonJS 모듈인 경우, 다음과 같이 지정할 수 있습니다.

export default {
  // ...
  externals: {
    jquery: "commonjs jquery",
  },
};

string[]

export default {
  // ...
  externals: {
    subtract: ["./math", "subtract"],
  },
};

subtract: ['./math', 'subtract']를 사용하면 모듈의 일부를 선택할 수 있습니다. 여기서 ./math는 모듈이고, 번들은 subtract 변수에 지정된 부분만 필요로 합니다.

externalsType이 commonjs인 경우 이 예제는 require('./math').subtract;로 번역되고, externalsType이 window인 경우 이 예제는 window["./math"]["subtract"];로 번역됩니다.

문자열 구문(#string)과 유사하게, 배열의 첫 번째 항목에 ${externalsType} ${libraryName} 구문을 사용하여 외부 라이브러리 유형을 지정할 수 있습니다. 예를 들면 다음과 같습니다.

export default {
  // ...
  externals: {
    subtract: ["commonjs ./math", "subtract"],
  },
};

object

export default {
  // ...
  // 또는
  externals: {
    react: "react",
  },
};

export default {
  // ...
  // 또는
  externals: {
    lodash: {
      commonjs: "lodash",
      amd: "lodash",
      root: "_", // 전역 변수를 나타냅니다.
    },
  },
};

export default {
  // ...
  // 또는
  externals: {
    subtract: {
      root: ["math", "subtract"],
    },
  },
};

이 구문은 외부 라이브러리를 사용할 수 있는 모든 가능한 방법을 설명하는 데 사용됩니다. 여기서 lodash는 AMD 및 CommonJS 모듈 시스템에서 lodash로 사용할 수 있지만 전역 변수 형식에서는 _로 사용할 수 있습니다. 여기서 subtract는 전역 math 객체 아래의 subtract 속성을 통해 사용할 수 있습니다. (예. window['math']['subtract'])

interop

Non-ESM externals(commonjs, amd, umd 등)는 dynamic module입니다. strict ES module("type": "module"을 가진 package)에서 default를 import하면 전체 exports object가 반환되고, non-strict importer는 runtime __esModule 검사를 통해 이를 unbox합니다. object external의 선택적 interop hint는 importer와 무관하게 이 동작을 고정하며, Rollup의 output.interop을 미러링합니다.

• 'esModule' - external을 ES module namespace로 처리하여 default import가 .default export로 resolve되게 합니다.
• 'default' - external을 CommonJS module로 처리하여 default import가 전체 exports object로 resolve되게 합니다(Node.js semantics).

export default {
  // ...
  externals: {
    dep: {
      amd: "dep",
      interop: "esModule",
    },
  },
};

object with options

external 값은 external 아래의 target과 webpack의 처리 방식을 설명하는 옵션을 포함한 객체로도 지정할 수 있습니다.

export default {
  // ...
  externals: {
    "@scope/icons": {
      external: "commonjs @scope/icons",
      sideEffects: false,
    },
  },
};

• external - 위 형식 중 하나로 지정한 target(externals 타입별 문자열, 배열 또는 객체)입니다.
• sideEffects - external import에 side effect가 있는지 여부로, package.json의 sideEffects 플래그와 같은 개념입니다.

webpack은 external을 분석할 수 없으므로 이를 가져오면 관찰 가능한 작업이 수행된다고 가정하고 export를 아무도 읽지 않아도 import를 유지합니다. sideEffects: false는 그 반대를 나타내며 export가 사용되지 않으면 external을 완전히 제거할 수 있게 합니다. 특히 barrel 파일이 가져오는 큰 external은 그렇지 않으면 barrel을 사용하는 모든 청크에 요청이 남으므로 중요합니다.

function

ExternalsFn은 두 가지 형태가 있습니다.

• (ctx: ExternalsCtx, callback: ExternalsCallback) => void
• (ctx: ExternalsCtx) => Promise<ExternalsResult> 5.15.0+

webpack에서 외부화하려는 동작을 제어하기 위해 자체 함수를 정의하는 것이 유용할 수 있습니다. 예를 들어 webpack-node-externals는, node_modules 디렉터리에서 모든 모듈을 제외하고 패키지를 허용 목록에 추가하는 옵션을 제공합니다.

함수가 받을 수 있는 인수는 다음과 같습니다.

• ctx (ExternalsCtx): 파일 세부 정보를 포함하는 객체입니다.
  • ctx.context (string): import를 포함하는 파일의 디렉터리입니다.
  • ctx.request (string): 요청 중인 import 경로입니다.
  • ctx.originalRequest (string) 5.110.0+: ctx.request와 동일하지만, 컨텍스트 모듈의 요소인 경우에는 사용자가 작성한 요청입니다.
  • ctx.dependencyType (string): 참조하는 디펜던시의 카테고리입니다. 예: 'esm', 'commonjs' 또는 'url'.
  • ctx.contextInfo (object): issuer(예: 레이어, 컴파일러)에 대한 정보를 포함합니다.
  • ctx.getResolve 5.15.0+: 현재 리졸버 옵션으로 리졸브 함수를 가져옵니다.
• callback (ExternalsCallback, 즉 (err?: Error | null, result?: ExternalsResult, type?: string) => void): 모듈을 외부화하는 방법을 나타내는 데 사용되는 콜백 함수입니다.

콜백 함수는 세 가지 인수를 사용합니다.

• err (Error): import를 외부화하는 동안 오류가 있었는지 나타내는 데 사용됩니다. 오류가 있는 경우 이 파라미터만 사용해야 합니다.
• result (ExternalsResult, 즉 string | string[] | boolean | object): 다른 외부 형식(string, string[], 또는 object)를 사용하여 외부 모듈을 설명합니다.
• type (string): 모듈 external type을 나타내는 선택적 파라미터입니다(result 파라미터에 아직 표시되지 않은 경우).

예를들어, import 경로가 정규 표현식과 일치하는 모든 import를 외부화 하려면 다음을 수행할 수 있습니다.

webpack.config.js

export default {
  // ...
  externals: [
    function ({ context, request }, callback) {
      if (/^yourregex$/.test(request)) {
        // 요청 경로를 사용하여 commonjs 모듈로 외부화
        return callback(null, `commonjs ${request}`);
      }

      // import를 외부화하지 않고 계속
      callback();
    },
  ],
};

다른 모듈 형식을 사용하는 다른 예제입니다.

webpack.config.js

export default {
  externals: [
    function (ctx, callback) {
      // external은 `@scope/library`에 있는 `commonjs2` 모듈입니다.
      callback(null, "@scope/library", "commonjs2");
    },
  ],
};

webpack.config.js

export default {
  externals: [
    function (ctx, callback) {
      // external은 `nameOfGlobal`이라는 전역 변수입니다.
      callback(null, "nameOfGlobal");
    },
  ],
};

webpack.config.js

export default {
  externals: [
    function (ctx, callback) {
      // external은 `@scope/library` 모듈에서 명명된 export입니다.
      callback(null, ["@scope/library", "namedexport"], "commonjs");
    },
  ],
};

webpack.config.js

export default {
  externals: [
    function (ctx, callback) {
      // external은 UMD 모듈입니다.
      callback(null, {
        root: "componentsGlobal",
        commonjs: "@scope/components",
        commonjs2: "@scope/components",
        amd: "components",
      });
    },
  ],
};

RegExp

주어진 정규식과 일치하는 모든 의존성은 출력 번들에서 제외됩니다.

webpack.config.js

export default {
  // ...
  externals: /^(jquery|\$)$/i,
};

이 경우, jQuery, 대문자 여부, 또는 $라는 종속성이 외부화됩니다.

Combining syntaxes

때때로 위의 구문을 조합하여 사용할 수 있습니다. 다음과 같은 방식으로 수행할 수 있습니다.

webpack.config.js

export default {
  // ...
  externals: [
    {
      // 문자열
      react: "react",
      // 객체
      lodash: {
        commonjs: "lodash",
        amd: "lodash",
        root: "_", // 전역 변수를 나타냅니다.
      },
      // [string]
      subtract: ["./math", "subtract"],
    },
    // 함수
    function ({ context, request }, callback) {
      if (/^yourregex$/.test(request)) {
        return callback(null, `commonjs ${request}`);
      }
      callback();
    },
    // 정규식
    /^(jquery|\$)$/i,
  ],
};

이 설정을 사용하는 방법에 대한 자세한 내용은, 라이브러리 작성 방법에 대한 문서를 참고하십시오.

byLayer

Record<string, ExternalItem> (layer: string | null) => ExternalItem

레이어별로 external을 지정합니다.

webpack.config.js

export default {
  externals: {
    byLayer: {
      layer: {
        external1: "var 43",
      },
    },
  },
};

externalsType

string

기본 external 유형을 지정합니다. output.library.type이 유효한 externals 타입인 경우 기본값은 해당 값이 되며, 그렇지 않으면 output.module이 활성화된 경우 'module-import'로, 그 외에는 'var'로 설정됩니다. amd, umd, system 및 jsonp external은 output.libraryTarget이 동일한 값으로 설정되는 것에 의존합니다. 예. amd 라이브러리 내에서만 amd external을 사용할 수 있습니다.

지원 유형:

• 'amd'
• 'amd-async' - 비동기 AMD require([...]) API를 통해 external을 로드합니다(async module). 5.109.0+
• 'amd-require'
• 'assign' - 'var'과 동일합니다.
• 'asset' - external이 애셋 URL로 처리되며, 모듈은 요청 문자열을 내보냅니다.
• 'asset-url' - external이 URL로 사용됩니다. 예: CSS url().
• 'commonjs'
• 'commonjs2' - 'commonjs'와 동일한 출력입니다.
• 'commonjs-module'
• 'commonjs-static' - 'commonjs'와 동일한 출력입니다.
• 'css-import' - external이 CSS @import url(...)이 됩니다.
• 'css-url' - 'asset-url'의 더 이상 사용되지 않는 별칭입니다.
• 'global'
• 'jsonp'
• 'module'
• 'import'
• 'module-import'
• 'node-commonjs'
• 'promise' - 'var'과 동일하지만, 결과를 기다립니다(비동기 모듈)
• 'self'
• 'system'
• 'script'
• 'this'
• 'umd'
• 'umd2'
• 'var'
• 'window'

webpack.config.js

export default {
  // ...
  externalsType: "promise",
};

externalsType.amd-async

externals의 기본 type을 'amd-async'로 지정합니다. 'amd'와 마찬가지로 external은 AMD loader를 통해 resolve되지만, runtime에는 비동기 require([...]) API를 통해 로드되고 async module로 노출됩니다. 즉 output bundle 자체가 AMD library로 래핑될 필요가 없으므로(일치하는 output.library.type이 필요 없음), AMD-only external을 어떤 chunk format에서도 사용할 수 있습니다.

Example

import _ from "lodash";

webpack.config.js

export default {
  // ...
  externalsType: "amd-async",
  externals: {
    lodash: "lodash",
  },
};

external module은 webpack의 async module runtime을 통해 노출되며, 다음과 같은 표현식으로 resolve됩니다.

new Promise((resolve, reject) => {
  if (typeof require !== "function") {
    reject(
      new Error(
        "AMD 'require' is not available to load external module lodash",
      ),
    );
    return;
  }
  require(["lodash"], (module) => resolve(module), reject);
});

externalsType.commonjs

외부속성의 기본 유형을 'commonjs'로 지정합니다. Webpack은 모듈에서 사용되는 외부속성에 대해 const X = require('...')와 같은 코드를 생성합니다.

Example

import fs from "fs-extra";

webpack.config.js

export default {
  // ...
  externalsType: "commonjs",
  externals: {
    "fs-extra": "fs-extra",
  },
};

이는 다음과 같이 생성됩니다.

const fs = require("fs-extra");

출력 번들에 require()가 있다는 점을 유의하세요.

externalsType.global

외부 속성의 기본 유형을 'global'로 지정합니다. Webpack은 외부 속성을 globalObject의 전역 변수로 읽습니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

export default {
  // ...
  externalsType: "global",
  externals: {
    jquery: "$",
  },
  output: {
    globalObject: "global",
  },
};

이는 다음과 같이 생성됩니다.

const jq = globalThis.$;

jq(".my-element").animate(/* ... */);

externalsType.module

외부의 기본 유형을 'module'로 지정하세요. Webpack은 모듈에서 사용되는 외부 요소에 대해 import * as X from '...'와 같은 코드를 생성합니다.

우선 output.module을 활성화해야 합니다. 그렇지 않으면 webpack에서 오류가 발생합니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

export default {
  output: {
    module: true,
  },
  externalsType: "module",
  externals: {
    jquery: "jquery",
  },
};

이는 다음과 같이 생성됩니다.

import * as __WEBPACK_EXTERNAL_MODULE_jquery__ from "jquery";

const jq = __WEBPACK_EXTERNAL_MODULE_jquery__.default;
jq(".my-element").animate(/* ... */);

출력 번들에 import 구문이 있다는 점을 유의하세요.

Preserving phase keywords

defer 및 source import phase keyword는 import attributes와 같은 방식으로 module externals에서도 보존됩니다. module external에 대한 정적 import defer * as ns from "mod"는 native import defer * as ... 구문으로 생성되며, import source v from "mod"는 import source ... from "mod"로 유지됩니다. 같은 external을 두 가지 phase로 import하면 서로 다른 ExternalModule 인스턴스가 생성되므로, 어느 phase도 조용히 제거되지 않습니다.

// 입력
import defer * as ns from "external-mod";
import source v from "external-mod";

// 생성된 출력(externalsType: "module" 사용 시)
import defer * as ns from "external-mod";
import source v from "external-mod";

externalsType.import

외부의 기본 유형을 'import'로 지정합니다. Webpack은 모듈에 사용되는 external에 대해 import('...')와 같은 코드를 생성합니다.

Example

async function foo() {
  const jq = await import("jQuery");
  jq(".my-element").animate(/* ... */);
}

webpack.config.js

export default {
  externalsType: "import",
  externals: {
    jquery: "jquery",
  },
};

아래와 같이 생성합니다.

const __webpack_modules__ = {
  jQuery: (module) => {
    module.exports = import("jQuery");
  },
};

// webpack 런타임...

async function foo() {
  const jq = await Promise.resolve(/* import() */).then(
    __webpack_require__.bind(__webpack_require__, "jQuery"),
  );
  jq(".my-element").animate(/* ... */);
}

출력 번들에는 'import()' 구문이 있습니다.

Preserving phase keywords

동적 import.defer(...)와 import.source(...)도 import 함수 이름이 기본값인 "import"일 때 import externals에서 보존됩니다. 이 경우 phase keyword는 제거되지 않고 출력에 그대로 생성됩니다.

// 입력
const ns = await import.defer("external-mod");
const src = await import.source("external-mod");

// 생성된 출력(externalsType: "import" 사용 시)
const ns = await import.defer("external-mod");
const src = await import.source("external-mod");

externalsType.module-import

외부의 기본 유형을 module-import'`로 지정합니다. 이것은 [`'module'`](#externalstypemodule)과 [`'import'`](#externalstypeimport)를 결합합니다. Webpack은 자동으로 가져오기 구문의 유형을 감지하여 정적 가져오기의 경우 module'로, 동적 가져오기의 경우 ``import'로 설정합니다.

정적 가져오기가 있는 경우 먼저 output.module을 활성화해야 합니다. 그렇지 않으면 webpack에서 오류가 발생합니다.

Example

import { attempt } from "lodash";

async function foo() {
  const jq = await import("jQuery");
  attempt(() => jq(".my-element").animate(/* ... */));
}

webpack.config.js

export default {
  externalsType: "module-import",
  externals: {
    jquery: "jquery",
    lodash: "lodash",
  },
};

아래와 같이 생성됩니다.

import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";

const lodash = __WEBPACK_EXTERNAL_MODULE_lodash__;

const __webpack_modules__ = {
  jQuery: (module) => {
    module.exports = import("jQuery");
  },
};

// webpack 런타임...

async function foo() {
  const jq = await Promise.resolve(/* import() */).then(
    __webpack_require__.bind(__webpack_require__, "jQuery"),
  );
  (0, lodash.attempt)(() => jq(".my-element").animate(/* ... */));
}

출력 번들에는 import 또는 import() 문이 포함됩니다.

모듈이 import 또는 import()를 통해 임포트되지 않으면 webpack은 "module" 외부 유형을 폴백으로 사용합니다. 다른 종류의 외부를 폴백으로 사용하려면 externals 옵션에서 함수로 지정할 수 있습니다. 예를 들어 보겠습니다.

export default {
  externalsType: "module-import",
  externals: [
    function ({ request, dependencyType }, callback) {
      if (dependencyType === "commonjs") {
        return callback(null, `node-commonjs ${request}`);
      }
      callback();
    },
  ],
};

externalsType.node-commonjs

외부의 기본 유형을 'node-commonjs'로 지정하세요. Webpack은 모듈에서 사용되는 외부 요소를 로드하기 위한 require 함수를 구성하기 위해 'module'에서 createRequire를 가져올 것입니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

module.export = {
  output: {
    module: true,
  },
  externalsType: "node-commonjs",
  externals: {
    jquery: "jquery",
  },
};

이는 다음과 같이 생성됩니다.

import { createRequire } from "node:module";

const jq = createRequire(import.meta.url)("jquery");
jq(".my-element").animate(/* ... */);

출력 번들에 import 구문이 있다는 점을 유의하세요.

이것은 종속성이 Node.js 내장 모듈에 의존하거나 프로토타입을 보존하기 위해 CommonJS 스타일의 require 함수가 필요한 경우에 유용합니다. 이는 util.inherits와 같은 함수에 필요합니다. 자세한 내용은 이 이슈를 참고하세요.

다음은 프로토타입 구조에 의존하는 코드의 예시입니다.

function ChunkStream() {
  Stream.call(this);
}
util.inherits(ChunkStream, Stream);

node-commonjs를 사용하면 프로토타입 체인이 보존되는지 확인할 수 있습니다.

const { builtinModules } = require("node:module");

export default {
  output: { module: true },
  externalsType: "node-commonjs",
  externals: ({ request }, callback) => {
    if (request.startsWith("node:") || builtinModules.includes(request)) {
      return callback(null, `node-commonjs ${request}`);
    }
    callback();
  },
};

이렇게 하면 다음과 같은 결과가 생성됩니다.

import { createRequire as __WEBPACK_EXTERNAL_createRequire } from "node:module";

const __webpack_modules__ = {
  // ...
  /***/ 2613: /***/ (module) => {
    module.exports = __WEBPACK_EXTERNAL_createRequire(import.meta.url)(
      "stream",
    );

    /***/
  },
  // ...
};

이러한 설정은 프로토타입 구조를 그대로 유지하여 Node.js에 내장된 기능의 문제를 해결합니다.

externalsType.promise

외부 속성의 기본 유형을 'promise'로 지정합니다. Webpack은 외부 속성을 전역변수('var'와 유사함)로 읽고 await 합니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

export default {
  // ...
  externalsType: "promise",
  externals: {
    jquery: "$",
  },
};

이는 다음과 같이 생성됩니다.

const jq = await $;

jq(".my-element").animate(/* ... */);

externalsType.self

외부 속성의 기본 유형을 'self'로 지정합니다. Webpack은 외부 속성을 self 객체의 전역 변수로 읽습니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

export default {
  // ...
  externalsType: "self",
  externals: {
    jquery: "$",
  },
};

이는 다음과 같이 생성됩니다.

const jq = globalThis.$;

jq(".my-element").animate(/* ... */);

externalsType.script

외부의 기본 유형을 'script'로 지정하세요. Webpack은 HTML의 <script> 요소로 미리 정의된 전역 변수를 노출하는 스크립트로 외부를 로드합니다. <script> 태그는 스크립트가 로드된 후 제거됩니다.

Syntax

export default {
  externalsType: "script",
  externals: {
    packageName: [
      "http://example.com/script.js",
      "global",
      "property",
      "property",
    ], // 프로퍼티는 선택 사항입니다.
  },
};

프로퍼티를 지정하지 않을 경우 바로 가기 구문을 사용할 수도 있습니다.

export default {
  externalsType: "script",
  externals: {
    packageName: "global@http://example.com/script.js", // 여기엔 프로퍼티가 없습니다
  },
};

output.publicPath는 제공된 URL에 추가되지 않습니다.

Example

CDN에서 lodash를 로드해 보겠습니다.

webpack.config.js

export default {
  // ...
  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]));

위의 예제 코드를 위해 다음과 같이 프로퍼티를 지정해야 합니다.

export default {
  // ...
  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(globalThis._.head(["a", "b"])); // 여기 로그는 a 입니다

externalsType.this

외부 속성의 기본 유형을 'this'로 지정합니다. Webpack은 외부 속성을 this 객체의 전역 변수로 읽습니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

export default {
  // ...
  externalsType: "this",
  externals: {
    jquery: "$",
  },
};

이는 다음과 같이 생성됩니다.

const jq = this.$;

jq(".my-element").animate(/* ... */);

externalsType.var

외부 속성의 기본 유형을 'var'로 지정합니다. Webpack은 외부 속성을 전역 변수로 읽습니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

export default {
  // ...
  externalsType: "var",
  externals: {
    jquery: "$",
  },
};

이는 다음과 같이 생성됩니다.

const jq = $;

jq(".my-element").animate(/* ... */);

externalsType.window

외부 속성의 기본 유형을 'window'로 지정합니다. Webpack은 외부 속성을 window 객체의 전역 변수로 읽습니다.

Example

import jq from "jquery";

jq(".my-element").animate(/* ... */);

webpack.config.js

export default {
  // ...
  externalsType: "window",
  externals: {
    jquery: "$",
  },
};

이는 다음과 같이 생성됩니다.

const jq = globalThis.$;

jq(".my-element").animate(/* ... */);

externalsPresets

object

특정 대상에 대한 외부 프리셋 설정을 활성화합니다.

node.js 관련 프리셋으로 ES 모듈을 출력하는 경우, 내장 모듈은 module-import로 외부화됩니다. ES 모듈 출력에서 node-commonjs external 및 externalsPresets.node가 설정된 경우 commonjs* external은 require() 대신 createRequire를 사용하여 require 함수를 구성합니다.

Example

node 프리셋을 사용하면 내장 모듈을 번들로 묶지 않고 외부 모듈로 취급하고 사용할 때 require()를 통해 로드합니다.

webpack.config.js

export default {
  // ...
  externalsPresets: {
    node: true,
  },
};

externalsPresets.nodeModules

boolean object

node_modules 디렉터리로 리졸브되는 모든 요청을 external로 처리하고 번들링 대신 런타임에 require() 또는 import로 로드합니다. 일반적으로 server-side 빌드에 필요한 동작입니다. 의존성이 이미 출력 옆에 설치되어 있으므로 번들링하면 빌드가 느려지고 출력만 커집니다.

webpack.config.js

export default {
  // ...
  target: "node",
  externalsPresets: {
    nodeModules: true,
  },
};

preset은 요청의 작성 방식이 아니라 리졸브 위치를 확인하므로 symlink를 통해 node_modules로 리졸브되는 요청(pnpm store 또는 연결된 workspace 패키지)도 external 처리합니다. 다음 항목은 external 처리되지 않으므로 별도로 나열할 필요가 없습니다.

• 설치된 패키지가 아닌 상대 및 절대 요청과 # subpath import
• 런타임이 자체적으로 로드할 수 있는 파일로 리졸브되지 않는 항목, 즉 .js, .mjs, .cjs, .json, .node 이외의 파일. JavaScript에서 가져온 패키지 CSS나 애셋은 번들에 남아 webpack이 계속 처리합니다.
• 자체 preset이 처리하는 CSS @import 및 url() 참조
• resolve.alias가 다른 패키지로 보내는 요청. external은 원래 요청을 유지하여 잘못된 대상을 로드하기 때문입니다.

external은 node-commonjs로 내보내며 output.module이 활성화되면 module-import로 내보냅니다. require() 의존성은 어느 경우에도 node-commonjs를 유지하여 require() semantics를 보존합니다.

externalsPresets.nodeModules.allowlist

일부 설치된 패키지는 계속 번들링해야 합니다. 출력은 CommonJS인데 ESM만 제공하는 패키지, 출력 옆에 배포되지 않는 workspace 패키지, loader로 처리하려는 패키지 등이 해당합니다. 번들에 유지할 항목을 allowlist에 전달하세요.

export default {
  // ...
  externalsPresets: {
    nodeModules: {
      allowlist: [
        // 정확한 요청
        "some-esm-only-package",
        // scope 아래의 모든 항목
        /^@my-company\//,
        // 또는 요청별로 결정
        (request) => request.startsWith("internal-"),
      ],
    },
  },
};

각 항목은 정확히 일치하는 문자열, 요청을 검사하는 RegExp, 또는 번들에 유지할 요청에 true를 반환하는 함수입니다.