Targets

JavaScript는 서버와 클라이언트 모두 작성이 가능하기 때문에 webpack은 webpack 설정에서 다수의 배포 대상을 제공합니다.

Usage

target 프로퍼티를 설정하려면 webpack 설정에서 target 값을 설정하기만 하면 됩니다.

webpack.config.js

export default {
  target: "node",
};

위 예제에서 node webpack을 사용하면 Node.js와 유사한 환경에서 사용할 수 있도록 컴파일됩니다. (Node.js의 require를 사용하여 청크를 로드하고 fs나 path와 같은 모듈은 수정하지 않습니다.)

각 target은 배포와 환경에 관련된 다양한 추가 기능이 있으며, 필요에 맞게 지원됩니다. 사용 가능한 target을 확인하세요.

Multiple Targets

webpack은 target 프로퍼티에 문자열 배열을 전달하는 것을 지원합니다. 이 경우 해당 기능들의 공통 부분집합이 사용됩니다. 이를 통해 여러 환경에서 실행되는 범용 코드를 빌드할 수 있습니다. 예를 들어 web과 node를 결합할 수 있습니다.

webpack.config.js

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

또는 두 개의 개별 설정을 번들링하여 동형(isomorphic) 라이브러리를 생성할 수 있습니다.

webpack.config.js

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

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

const serverConfig = {
  target: "node",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "lib.node.js",
  },
  // …
};

const clientConfig = {
  target: "web", // <=== 기본값은 'web'이므로 생략 가능
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "lib.js",
  },
  // …
};

export default [serverConfig, clientConfig];

위 예제에서는 dist 폴더에 lib.js와 lib.node.js 파일을 생성합니다.

Resources

위의 옵션에서 볼 수 있듯이 여러 배포 target을 선택할 수 있습니다. 다음은 참고할 수 있는 예제 및 리소스 목록입니다.

• compare-webpack-target-bundles: 다양한 webpack target을 테스트하고 볼 수 있는 유용한 리소스 입니다. 그리고 버그 리포팅에도 유용합니다.
• Boilerplate of Electron-React Application: electron의 메인 프로세스와 렌더러 프로세스에 대한 빌드 프로세스의 좋은 예입니다.