Webpack 이해하기 (3) - 다중 환경에서의 웹팩 설정

dev , prod와 같은 다중 환경에서의 웹팩 설정하기.

현재까지의 설정 코드로는 development목적으로는 사용할 수 있지만,

production 목적으로 사용할 때는 번들크기 및 환경 구성과 관련해 어느 정도 최적화가 필요하다.

1. dev,prod 환경에 재사용되는 파일로 Rename하기

• (webpack.config.js ⇒ webpack.common.js) 
• 기존 파일에서 mode : ‘development’ 옵션 제거

2.  webpack.dev.js 추가

        

          

            

            

            

          
          
PYTHON
          
        
      module.exports={
mode: 'development',
devtool: 'cheap-module-source-map', 
//원본 소스와 변환된 코드 사이의 매핑을 제공하며, 빌드 속도와 파일 크기 사이에 좋은 균형을 제공, 하지만, 
//column 매핑은 제공하지 않아 프로덕션 환경의 정확한 오류 추적에는 적합하지 않을 수 있습니다.
}

3. webpack.prod.js 추가

        

          

            

            

            

          
          
GROOVY
          
        
      module.exports={
mode: 'productio',
devtool: 'source-map', //CRA환경에 대해 권장, 성능 최적화와 정확한 소스 맵핑에 초점을 맞추고 있는 설정
}

4. webpack.config.js 추가

• webpack.common.js파일과 각각의 dev, prod 모드 파일과의 merge 목적

        

          

            

            

            

          
          
JAVASCRIPT
          
        
      // for merging  webpack.common.js + each 'dev'|'prod' 

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

// package.json 파일에서 전달하는 환경 변수에 엑세스할 수 있음.
// 객체가 아닌 함수 형태로 할당
module.exports = (envVars)=>{
  const { env } = envVars // destructuring
  const envConfig = require(`./webpack.${env}.js`)
  const config = merge(commonConfig, envConfig) // 두 config 파일을 병합
  return config 
}

5. package.json파일의 scripts 설정

• 각 옵션에서 에러가 발생한다면 ‘—open’ 커맨드를 삭제

        

          

            

            

            

          
          
STATA
          
        
      "scripts": {
// 웹팩의 서로 다른 실행 시나리오에 따라 웹팩 실행 모드가 달라짐.
// dev모드 : webpack serve 개발서버 실행, env환경변수를 dev로 제공 
    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
// prod모드 : webpack 빌드 프로세스 실행, serve 제거 env=prod 변경 (env환경변수를 prod로 제공)
    "build": "webpack --config webpack/webpack.config.js --env env=prod",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },

6. 빌드 과정에서 코드 내에서 사용할 전역상수 정의해주기(option)

• webpack.DefinePlugin: 빌드 시의 전역 변수 설정을 통해 다양한 환경에 대응하는 유연한 코드 작성을 가능하게 합니다.

        

          

            

            

            

          
          
JAVASCRIPT
          
        
      const webpack = require('webpack')

module.exports={
  mode: 'productio',
  devtool: 'source-map',
// 'process.env.name'라는 이름의 전역 상수를 정의해줄 수 있다.
// 개발 모드에 따라 Value를 다르게 설정해서 동적으로 변경시킬 수 있음.
// 개발 환경과 프로덕션 환경에서 다른 API 엔드포인트를 사용해야 할 때 이를 환경 변수로 설정하여 다르게 처리할 수 있다.
  plugin: [
    new webpack.DefinePlugin({
      'process.env.name': JSON.stringify('Jake-Prod-ModeVar')
    })
  ]
  }

7. 이제 yarn build 명령어를 통해 빌드된 결과물을 실행시킬 수 있습니다.

• yarn build
• cd build 이동 → npx serve 커맨드 실행

│ │ Serving! │ │ │ │ - Local: http://localhost:3000 │ │ │ │ Copied local address to clipboard! │ │

build된 bundle 파일을 실행

 

dev 모드에서의 bundle.js사이즈 338kB

 

build 후 bundle.js의 사이즈 49.1kB

[요약]

1. common configuration ( webpack.common.js )
2. dev, prod 모드 분할 생성 ( webpack.dev.js | webpack.prod.js )
3. webpack.config.js 에서 merge

• script를 실행할 때 동적으로 환경변수가 적용되어 적용될 webpack config파일이 결정됩니다.

 

Reference

https://www.youtube.com/watch?v=25kFcF54GNk&list=PLC3y8-rFHvwiWPS2RO3BKotLRfgg_8WEo&index=5