Webpack - 웹팩 Output (3)

지난 포스트에 이어서 웹팩의 구성 요소인 Output에 대해서 알아보도록 하겠습니다.

Output

출력 구성 옵션을 구성하면 컴파일된 파일을 디스크에 쓰는 방법을 웹팩에게 알려줍니다. 여러 진입점이 있을 수 있지만, 출력 구성은 하나만 지정됩니다.

사용방법

웹팩 구성에서 출력 속성에 대한 최소 요구 사항은 해당 값을 객체로 설정하고, 출력 파일에 사용할 output.filename(https://webpack.js.org/configuration/output/#outputfilename) 을 제공하는 것입니다.

module.exports = {
  output: {
    filename: 'bundle.js',
  }
};

이 구성은 단일 bundle.js 파일을 dist 디렉토리에 출력합니다.

Multiple Entry Points (다중 진입점)

만약 구성이 하나 이상의 chunk를 생성하는 경우 (여러 진입점 또는 CommonsChunkPlugin과 같은 플러그인을 사용하는 경우) 대체(substitutions)를 사용하여 각 파일이 고유한 이름을 갖도록 해야합니다.

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

// 파일 쓰기: ./dist/app.js, ./dist/search.js

고급 활용

다음은 assets 에 대해 CDN 및 해시를 사용하는 좀 더 복잡한 얘입니다.

module.exports = {
  //...
  output: {
    path: '/home/proj/cdn/assets/[hash]',
    publicPath: 'https://cdn.example.com/assets/[hash]/'
  }
};

컴파일 타임에 출력파일의 최종 publicPath를 알 수 없는 경우에는 빈 상태로 두고, 진입점 파일의 webpack_public_path 변수를 통해 런타임에 동적으로 설정할 수 있습니다.

__webpack_public_path__ = myRuntimePublicPath;

// 나머지 응용 프로그램 항목…