Webpack 공식 홈페이지 따라하기 (4) - Output

output 옵션을 설정하여 컴파일된 파일을 디스크에 쓰는 방법을 webpack에 알려줄 수 있다.

하나의 출력 설정만 지정된다는 점에 주의하라

 

1. Usage

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

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

 

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

 

2. Multiple Entry Points

설정에서 하나 이상의 "청크'를 생성하면(다중 엔트리 포인트나 CommonsChunkPlugin과 같은 플러그인을 사용하는 경우) 
substiltution(예를 들면 [name])을 사용하여 파일이 고유한 이름을 갖도록 해야 한다.

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

// dist는 다음과 같이 작성될 수 있따.. ./dist/app.js , ./dist/search.js

 

3. Advanced

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

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

 

출력 파일의 최종 publicPath를 컴파일 시점에 알 수 없는 경우, 공백으로 남겨두고 런타임에 엔트리 포인트 파일의

__webpack_public_path__를 통해 동적으로 설정할 수 있다.

__webpack_public_path__ = myRuntimePublicPath