[Webpack] - #3 Output

 [ Webpack 시리즈 ]

 

[Webpack] - #1 Webpack이란?

[Webpack] - #2 Entry

[Webpack] - #3 Output

[Webpack] - #4 Loader

[Webpack] - #5 Plugin

[Webpack] - #6 Dev Server

[Webpack] - #7 웹팩 세팅하기 (feat: ES module)

 

 

 

 

Output

• 웹팩이 빌드되고 난 후 결과물의 파일 경로.

// webpack.config.js

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

• 객체형태로 옵션을 추가할 수 있다.
• 최소한의 옵션으로 filename을 지정해줘야 한다.

 

 

 

Output 옵션 속성

// webpack.config.js

module.exports = {
	output: {
    	filename: 'bundle.js',
        path: path.resolve(__dirname), './dist)
    }
}

• filename : 웹팩으로 빌드한 파일의 이름
• path: 해당 파일의 경로
  • path.resolve()  : 인자로 넘어온 경로를 조합하여 유효한 파일 경로를 만들어주는 Node.is API
  • 후에 다시 언급하겠지만 웹팩은 node.js 환경에서 작동한다.

 

 

Output 파일 이름 옵션

• filename 속성에 다양한 옵션이 있다.

 

1. 결과 파일에 entry 속성을 포함

module.exports = {
	output: {
    	filename: '[name].bundle.js'
    }
}

 

 

2. 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함

module.exports = {
	output: {
    	filename: '[id].bundle.js'
    }
}

 

 

3. 매 빌드시 마다 고유 해시 값을 붙이는 옵션

module.exports = {
	output: {
    	filename: '[name].[hash].bundle.js'
    }
}

 

 

4. 웹팩의 각 모듈 내용을 기준으로 생성된 해시 값을 붙이는 옵션

• 파일이 번들링 될 때만 해쉬값을 변경

module.exports = {
	output: {
    	filename: '[chunkhash].bundle.js'
    }
}