출력

출력 (Output)

output 설정 옵션은 webpack이 컴파일된 파일을 디스크에 어떻게 쓸지를 정해요. 엔트리 포인트는 여러 개일 수 있지만, output 설정은 하나만 지정한다는 점을 기억해 두세요.

출처: Webpack — Output

기본 사용법

최소한의 요건은 output 값에 객체를 주고, 출력 파일에 쓸 이름인 output.filename을 제공하는 거예요.

// webpack.config.js
export default {
  output: {
    filename: "bundle.js",
  },
}

이 설정은 단일 bundle.js 파일을 dist 디렉토리에 출력해요.

여러 엔트리 포인트

엔트리 포인트가 여럿이거나 CommonsChunkPlugin 같은 플러그인으로 "청크(chunk)"가 여러 개 생기면, 각 파일이 고유한 이름을 갖도록 치환(substitution)을 써야 해요.

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

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

export default {
  entry: {
    app: "./src/app.js",
    search: "./src/search.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
  },
}
// 디스크에 ./dist/app.js, ./dist/search.js 로 쓰인다

고급: CDN과 해시

CDN과 해시를 함께 쓰는 더 복잡한 예시도 봐볼게요.

export default {
  // ...
  output: {
    path: "/home/proj/cdn/assets/[fullhash]",
    publicPath: "https://cdn.example.com/assets/[fullhash]/",
  },
}

최종 publicPath를 컴파일 시점에 알 수 없는 경우에는 비워 두고, 엔트리의 __webpack_public_path__ 변수로 런타임에 동적으로 설정할 수도 있어요. 이렇게 하면 배포 위치가 달라져도 자산 경로를 실행 중에 맞출 수 있어요.

더 알아보기

• Entry Points
• Loaders
• Plugins