본문으로 건너뛰기
Advertisement

실전 프로 팀 (Pro Tips)

1. 환경별 구성 분리 (webpack-merge)​

프로젝트 규모가 커지면 개발 환경(Development)과 배포 환경(Production)의 Webpack 설정이 많이 달라집니다. 하나의 거대한 파일에 모든 옵션을 두기보단, 공통 옵션과 환경별 옵션을 나누어 webpack-merge 라이브러리로 병합하여 사용하는 것이 좋습니다.

npm install webpack-merge --save-dev
  • webpack.common.js: 로더, entry, 플러그인 기본 설정
  • webpack.dev.js: devServer, source-map 등
  • webpack.prod.js: 모듈 최소화(Minify), 번들 최적화 플러그인 등

2. Source Map 최적화 구성​

  • 개발 환경 (eval-source-map 등): 빠르고 상세한 소스 맵을 얻어 디버깅에 활용
  • 운영 환경 (source-map 또는 hidden-source-map): 외부에 원본 코드가 노출되지 않게 하면서, 에러 트래킹 서비스(Sentry 등)의 연동을 꾀할 수 있음. devtool: 'source-map' 설정을 하되, 프로덕션 서버에는 .map 파일을 제공하지 않도록 설정.

3. Webpack Bundle Analyzer 활용​

빌드된 번들이 왜 큰지 시각적으로 확인해볼 수 있는 매우 환상적인 도구입니다.

npm install webpack-bundle-analyzer --save-dev
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

빌드 시 번들 사이즈 비중을 트리맵 형태로 시각화해 띄워주므로, 불필요하게 번들 사이즈를 팽창시키는 라이브러리를 최적화하거나 교체할 때 유용하게 쓰입니다.

Advertisement
Advertisement