Webpack 파헤치기 2 - Mode, Entry, Output

Mode

mode 설정은 webpack 라이브러리가 bundle을 수행할 때, 어떤 설정을 기본으로 수행할지를 가리킵니다. 개발 모드와 배포 모드로 나뉘며 배포 모드일 경우, Bundle 시 더 복잡한 과정을 거칩니다.

mode: 'development' || 'production'

Entry

Entry 설정은 Webpack이 bundle을 시작하는 기준 파일을 가리킵니다. React를 기준으로 했을 때, React.Dom을 생성하는 파일의 경로를 설정하면 됩니다. 간단히 문자열로 설정할 수 있고, 배열로 설정할 수도 있습니다.

entry : `${path.resolve(__dirname, '../src')}/index.tsx`

Output

output 설정은 Webpack이 bundling을 종료할 때 생기는 결과물에 대한 설정을 가리킵니다. build 파일이 위치할 경로 혹은 파일의 이름, 파일 간의 경로 설정 방식 등을 설정할 수 있습니다.

output: {
		path: path.resolve(__dirname, '../build'), // 결과물이 생기는 위치
		publicPath: '/' || './', // 절대 경로, 상대 경로
		filename: 'js/[name].[chunkhash].bundle.js' // js 파일 이름
	},

여기서 눈여겨 볼 것은 publicPath입니다. Build 결과물이 실제 VM에서 어떤 방식으로 불려지는가에 따라 이 설정은 중요합니다. 조금 더 쉽게 이해하려면 Nginx의 Location 설정을 알아볼 필요가 있습니다. 예를 들어 아래와 같이 Location이 설정되어 있다고 생각해보겠습니다.

location: {
	# VM의 domain으로 www.google.com으로 설정되어 있다면
	/ : {
    	# 렌더링할 파일 경로
    	# 특정 설정
    },
    /admin : {
    	# 렌더링할 파일 경로
    	# 특정 설정
    },
    /client : {
    	# 렌더링할 파일 경로
    	# 특정 설정
    },
}

위와 같은 경우, root 경로와 다른 두 경로는 서로 다른 파일을 보여주게 됩니다. 만약 접속한 경로에 따라 다른 Build 결과물을 보여주어야 한다면 publicPath는 절대경로와 상대경로 중 어떤 것을 사용해야 할까요?

바로 상대경로를 사용해야 합니다. Build 결과물을 확인해보면 하나의 html 파일에서 js, css, jpg 등의 파일을 불러오는 것으로 구성되어 있습니다. 만약 절대경로로 설정되어 있다면 처음부터 훑는 Nginx의 특성 상, /admin에서 불러오는 파일은 root에서 불러오는 폴더에 저장되어 있는 파일을 불러오게 됩니다. 따라서 알맞는 파일을 불러올 수가 없고 빈 브라우저 화면을 보여주게 됩니다. 이렇게 Build 결과물이 어떤 상황에서 사용되느냐에 따라 publicPath를 조절하여 사용하면 됩니다.

정리

이번 글에선 Webpack의 가장 기본적인 부분을 정리해보았습니다. 이어서 Webpack의 핵심이라고 할 수 있는 Loader에 대해서 알아보도록 하겠습니다.