프로그래밍/웹관련

[Webpack] 컨피그(webpack.config.js) 분리하기

당근천국 2022. 12. 26. 15:30

프로젝트가 크지 않으면 웹팩 컨피그(webpack.config.js)를  분리할 이유가 별로 없습니다.

저도 계속 'if'문으로 분리해서 쓰고 있었는데요.....

 

프로젝트에 이것저것 설정할 게 많아지니 개발(development) 모드와 프로덕션(production) 모드 간의 차이가 많아져서 변수로 관리하는 것이 힘들어졌습니다.

 

 

1. 컨피그(webpack.config.js) 분리하기

이럴 때 필요한 것이 컨피그를 분리하는 것입니다.

 

구조는 다음과 같습니다.

1) 공통으로 사용할 공통 컨피그(webpack.common.js) 파일을 만들고

    공통으로 사용할 설정을 넣어줍니다.

2) 개발 모드에 사용할 컨피그(webpack.dev.js)를 만들고

    개발 모드에서만 사용할 설정을 넣어줍니다.

3) 배포 모드에 사용할 컨피그(webpack.prod.js)를 만들고

    배포 모드에서만 사용할 설정을 넣어줍니다.

4) 빌드시 공통 컨피그와 해당 빌드에 맞는 컨피그를 합치도록(merge) 설정해줍니다.

 

그림으로 보자면 아래와 같습니다.

 

2. 컨피그 만들기

먼저 공통으로 사용할 공통 컨피그를 만들고, 상황에 맞는 컨피그를 추가합니다.

 

상황에 맞는 컨피그의 설정을 우선 사용하게 되며,

각 컨피그에 없는 내용은 공통 컨피그의 내용을 사용하게 됩니다.

 

샘플 코드는 웹팩 가이드의 내용을 그대로 사용합니다.

(참고 : webpack Guides - Production )

 

2-1. 공통 컨피그(webpack.common.js) 만들기

'webpack.config.js'가 있던 위치에 'webpack.common.js'를 생성합니다.

어차피 공통 컨피그를 사용할 때는 경로를 명시해야 하므로 이름은 원하는 대로 만드시면 됩니다.

 

아래 내용을 넣어줍니다.

const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

 

웹팩의 기본적인 설정들이라 따로 설명하지 않겠습니다.

 

2-2. 개발용 컨피그(webpack.dev.js) 만들기

'webpack.dev.js'파일을 생성하고 아래 코드를 넣어 줍니다.

 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });

 

1번 줄 : 웹팩 컨피그를 합치기 위한 머지(webpack-merge) 기능을 불러옵니다.

 

2번 줄 : 공통 컨피그로 사용할 컨피그를 불러옵니다.

 

4번 줄 : 머지(merge)기능을 설정합니다.

공통 컨피그를 2번 줄에서 설정한 파일로 설정하고,

개발용에서 사용할 설정을 넣어줍니다.

 

5번 줄 : 배포용이므로 모드(mode)를 'development'로 해줍니다.

 

2-3. 배포용 컨피그(webpack.prod.js) 만들기

'webpack.prod.js'파일을 생성하고 아래 코드를 넣어 줍니다.

const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
 });

 

5번 줄 : 배포용이므로 모드(mode)를 'production'으로 해줍니다.

 

 

3. 패키지 수정

새로 만든 컨피그를 언제 구분해서 사용해야 하는지 전달하려면

패키지에서 웹팩을 호출할 때 매개변수로 사용할 컨피그를 전달해야 합니다.

"scripts": {
     "dev": "webpack --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js"
    },

 

시작 스크립트에서 '--config' 옵션을 추가하여 용도에 맞는 컨피그를 지정해줍니다.

 

이제 웹팩을 실행시키면 해당 컨피그를 사용하여 진행되는 것을 볼 수 있습니다.

 

 

마무리

이 내용은 웹팩 공식자료도 잘돼있고 여러 사람이 많이 올린 내용이라 정리할 생각이 없었는데....

매번 찾기가 귀찮아서 정리했습니다 ㅎㅎㅎ

저작자표시