Webpack Output

output 프로퍼티는 빌드 결과물에 대한 설정이다.

output 프로퍼티를 설정하는 것에 따라, 컴파일된 파일이 디스크에 쓰여지는 방식이 달라진다.
방식이라 함은 파일 이름의 명명 규칙, 파일 위치 등이 있다.

entry point가 여러개일 수 있는 반면에

output 설정은 하나밖에 없는 것이 중요한 포인트이다.

사용법

output 프로퍼티에 대한 최소한의 설정이 있다.
바로 ouput 프로퍼티에 하나의 객체와 filename 프로퍼티를 추가하는 것이다.
예시는 다음과 같다

webpack.config.js

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

entry point가 여러개인 경우

webpack 설정이 하나 이상의 청크를 만든다면 별도의 처리가 필요하다.
하나 이상의 청크를 만드는 경우는 다음과 같은 상황이 있는데,

• entry point가 여러개
• CommonsChunkPlugin 과같은 플러그인 사용
• code splitting

여러개의 파일이 생성될때 이름이 각각 구별되어야 하기 때문이다.
이럴 때 substitutions 을 통해 파일이 고유한 이름을 가질 수 있도록 보장한다.

여러가지 방법이 있는데 다음은 entry point 의 이름을 output 파일 이름을 설정하는 예시이다.

webpack.config.js

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

path는 컴파일된 파일이 쓰여지는 경로를 나타낸다.

기타 경우

CDN 을 사용하는 조금 더 복잡한 예시가 있다.

webpack.config.js

const path = require('path');

module.exports = {
    output: {
        path: path.resolve(__dirname, 'cdn/assets[fullshash]'),
        publicPath: 'https://cdn.example.com/assets/[fullhash],
    }
}

• path.resolve 메서드는 전달한 파일명의 조합을 절대경로로 반환해준다.

위 설정에서는 publicPath 에 cdn url을 직접 입력해주었다.
하지만 publicPath의 값을 컴파일 단계에서 결정할 수 없는 경우도 있다.
이런 경우에는 __webpack_public_path__ 변수와 할당문을 entry point 파일에 위치시키면 런타임에 동적으로 할당될 수 있다.

__webpack_public_path__ = myRuntimePublicPath