Output

output 옵션을 설정하여 컴파일된 파일을 디스크에 쓰는 방법을 webpack에 알려줍니다. 여러 진입점이 있을 수 있지만 하나의 출력 설정만 지정된다는 점에 주의하세요.

Usage

webpack 설정의 output 프로퍼티는 최소한 객체로 값을 설정해야 하며, 출력 파일에 사용할 output.filename이 제공되어야 합니다.

webpack.config.js

export default {
  output: {
    filename: "bundle.js",
  },
};

이 설정은 단일 bundle.js 파일을 dist 디렉터리에 출력합니다.

Multiple Entry Points

설정에서 하나 이상의 "청크"를 생성하면(다중 엔트리 포인트나 optimization.splitChunks, SplitChunksPlugin을 사용하는 경우), 각 파일이 고유한 이름을 갖도록 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"),
  },
};

// writes to disk: ./dist/app.js, ./dist/search.js

Advanced

다음은 애셋에서 CDN과 해시를 사용한 조금 더 복잡한 예제입니다.

config.js

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

출력 파일의 최종 publicPath를 컴파일 시점에 알 수 없는 경우, 공백으로 남겨두고 런타임에 엔트리 포인트 파일의 __webpack_public_path__를 통해 동적으로 설정할 수 있습니다.

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

Edit this page·

« Previous

Entry Points

Loaders

5 Contributors

Translators

limong