Target

Webpack은 다양한 환경과 target을 컴파일합니다. target이 무엇인지 자세히 이해하고 싶다면 target의 개념에 대한 페이지를 읽어보세요.

target

string [string] false

특정 환경에 대한 런타임 코드를 생성하도록 webpack에 지시합니다. webpack 런타임 코드는 작성하는 사용자 코드와 동일하지 않습니다. 예를 들어 소스 코드에 화살표 함수가 있고 ES5 환경에서 번들된 코드를 실행하려면, Babel과 같은 트랜스파일러로 해당 코드를 트랜스파일해야 합니다. Webpack은 target이 구성된 상태에서는 자동으로 트랜스파일하지 않습니다.

browserslist 설정이 없으면 'browserslist' 혹은 'web'으로 설정됩니다.

string

다음의 문자열은 WebpackOptionsApply를 통해서 지원됩니다.

예를 들어, target을 "electron-main"으로 설정하면, webpack은 electron의 여러 변수를 추가합니다.

node와 electron의 버전은 선택할 수 있습니다. 위 표에서 [[X].Y]로 표시됩니다.

webpack.config.js

export default {
  // ...
  target: "node12.18",
};

런타임 코드를 생성하는데 사용할 수 있는 ES 기능의 결정에 도움을 줍니다. (모든 청크와 모듈은 런타임 코드로 래핑 됩니다)

browserslist

프로젝트에 browserslist 설정이 있으면, webpack은 이 설정을 사용합니다.

• 런타임 코드를 생성하는데 사용할 수 있는 ES 기능을 결정합니다.
• 환경을 추론합니다. (예를 들어 일부 output.environment 설정이 있는 target: "node"와 동일한 마지막 2개의 Node 버전).

지원되는 browserslist

• browserslist - 자동으로 browserslist 설정과 환경을 사용 (가장 근접한 package.json이나 BROWSERSLIST 환경 변수, 자세한 사항은 browserslist documentation을 참고)
• browserslist:modern - 자동으로 해석된 browserslist 설정에서 modern사용
• browserslist:last 2 versions - 명시적으로 browserslist 쿼리 사용(설정은 무시됨)
• browserslist:/path/to/config - browserslist 설정을 지정할 수 있음
• browserslist:/path/to/config:modern - browserslist 설정 및 환경을 명시적으로 지정

universal

web, web worker, node, electron 및 nwjs 플랫폼을 결합한 단일 프리셋으로, 각 플랫폼 플래그를 중립으로 유지하여 번들이 하나의 환경에 고정되는 대신 런타임에 적응합니다. 수동으로 target: ["web", "node"]를 작성하는 것을 편리하게 대체하며, 항상 ECMAScript 모듈을 출력합니다. 이 타겟에 대해 experiments.outputModule은 기본적으로 true입니다.

webpack.config.js

export default {
  // ...
  target: "universal",
};

범용 빌드에 대한 참고사항:

• new Worker(new URL(...))는 Node에서는 worker_threads에서 Worker 생성자를 해석하고, 웹에서는 전역 Worker에서 해석합니다.
• ESM 출력에서 commonjs 및 node-commonjs externals가 지원되며(process.getBuiltinModule의 createRequire를 통해 로드됨), global externals는 전역 객체로 globalThis를 사용합니다.
• CSS는 서버 사이드 렌더링을 위해 Node에서 실행됩니다: style 주입 및 link로 로드된 청크의 스타일은 SSR 호스트가 읽을 수 있도록 globalThis["__webpack_css__" + output.uniqueName]에 수집됩니다.

bun

Bun을 위해 컴파일합니다. 번들은 ECMAScript 모듈로 생성되며(experiments.outputModule은 기본적으로 true), Bun 자체의 bun:* 모듈과 Bun이 제공하는 Node.js 내장 모듈은 번들에 포함되지 않고 외부화됩니다.

webpack.config.js

export default {
  // ...
  target: "bun",
};

deno

Deno를 위해 컴파일합니다. 번들은 ECMAScript 모듈로 생성됩니다(experiments.outputModule은 기본적으로 true). Node.js 내장 모듈은 Deno가 요구하는 node: 지정자를 통해 해석되며, Deno 자체의 import 프로토콜(npm:, jsr:, node: 및 http(s):// URL)은 런타임이 로드하도록 외부로 유지됩니다. 버전을 지정할 수 있습니다. 예: deno2 또는 deno1.40.

webpack.config.js

export default {
  // ...
  target: "deno", // "deno2", "deno1.40" 등도 가능
};

[string]

복수의 target을 작성하면 기능의 공통적인 하위 집합이 사용됩니다.

webpack.config.js

export default {
  // ...
  target: ["web", "es5"],
};

Webpack은 웹 플랫폼을 위해 런타임 코드를 생성하고 ES5 기능만 사용합니다.

플랫폼 target을 결합하여 여러 환경에서 실행되는 범용 코드를 빌드할 수도 있습니다.

webpack.config.js

export default {
  // ...
  target: ["web", "node"],
};

Webpack은 브라우저와 Node.js 환경 모두에서 작동하는 런타임 코드를 생성합니다.

false

target을 false로 설정하면, 위 목록에서 미리 정의된 target 중에 원하는 target이 없으면 플러그인이 적용되지 않습니다.

webpack.config.js

export default {
  // ...
  target: false,
};

혹은 원하는 특정한 플러그인을 적용할 수 있습니다.

webpack.config.js

import webpack from "webpack";

export default {
  // ...
  target: false,
  plugins: [
    new webpack.web.JsonpTemplatePlugin(options.output),
    new webpack.LoaderTargetPlugin("web"),
  ],
};

target 또는 환경에 대한 정보가 없으면, ES2015를 사용합니다.