webpack 개념 2.아웃풋 Output

아웃풋 Output

output 설정은 웹팩이 어떻게 컴파일 된 파일을 디스크에 생성할지 표현한다. entry point는 여러개 존재할 수 있지만, output은 오직 하나만 지정될 수 있다.

사용법

웹팩 구성에서 output 프로퍼티의 최소 요구사항은 filename 을 지정하는 것이다.

webpack.config.js

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

위와 같은 구성은 dist 폴더에 하나의 bundle.js 파일을 생성한다.

여러개의 엔트리 포인트 Multiple Entry Points

만약 여러개의 엔트리 포인트를 구성하거나 CommonsChunkPlugin 같은 플러그인을 사용해서 여러개의 chunk 를 만들고 싶다면, 각 파일들이 고유한 이름을 가질 수 있도록 치환자를 사용해야 한다.

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

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

고급

좀 더 복잡한 예제 : 에셋을 위한 CDN과 해시사용

config.js

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

컴파일 시점에 아웃풋 파일의 최종 publicPath를 모르는 경우, 우선 공백으로 두고 런타임 시점에 엔트리 포인트 파일의 __webpack_public_path__ 변수를 통해 동적으로 설정할 수 있다.

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

webpack 개념 2.아웃풋 Output

webpack 개념 3.모드 Mode

webpack 개념 4.로더 Loaders

webpack 개념 5.플러그인 Plugins

webpack 개념 6.설정 Configuration

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement