25. 실전 예제 프로젝트 - 2

특정 프로젝트의 Webpack 활용 예

Webpack은 다양한 프로젝트에서 모듈 번들링을 위해 활용됩니다. 이번에는 실제 프로젝트에서 Webpack을 어떻게 활용하는지에 대한 사례를 살펴보겠습니다.

프로젝트 소개

저희는 'AwesomeApp'이라는 가상의 모바일 어플리케이션을 개발하겠습니다. 이 어플리케이션은 React를 기반으로 하며, 다양한 화면과 기능을 포함하고 있습니다.

Webpack 설정

1. 다양한 환경에 대응한 설정 분리

프로젝트는 개발, 테스트, 프로덕션 등 다양한 환경에서 실행됩니다. Webpack 설정을 각 환경에 맞게 분리하여 사용합니다.

// webpack.config.js
const commonConfig = {
  // 공통 설정...
};

const devConfig = {
  // 개발 환경 설정...
  devtool: 'inline-source-map',
};

const prodConfig = {
  // 프로덕션 환경 설정...
  plugins: [
    new MiniCssExtractPlugin(),
    new OptimizeCssAssetsPlugin(),
  ],
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    return merge(commonConfig, devConfig);
  }
  if (argv.mode === 'production') {
    return merge(commonConfig, prodConfig);
  }
};

2. 다국어 지원을 위한 번역 파일 로딩

AwesomeApp은 국제 사용자를 대상으로 하기 때문에 다국어 지원이 필요합니다. Webpack을 사용하여 번역 파일을 동적으로 로딩하고 관리합니다.

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader',
        type: 'javascript/auto',
      },
    ],
  },
};

코드 스플리팅과 라이트하우스 통합

1. 라우팅 별로 코드 스플리팅

어플리케이션은 여러 화면으로 구성되어 있습니다. 각 라우팅에 따라 필요한 자바스크립트 파일을 동적으로 로딩하여 초기 로딩 속도를 최적화합니다.

// routes.js
import { lazy } from 'react';

const Home = lazy(() => import(/* webpackChunkName: "home" */ './Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ './About'));
//...

2. 라이트하우스 통합

어플리케이션의 성능을 지속적으로 모니터링하기 위해 라이트하우스를 도입하였습니다. Webpack 플러그인을 통해 빌드 시 라이트하우스 리포트를 생성하고 이를 통해 성능 최적화 작업을 진행합니다.

// webpack.config.js
const LighthousePlugin = require('lighthouse-webpack-plugin');

module.exports = {
  //...
  plugins: [
    new LighthousePlugin({
      url: 'http://localhost:3000',
    }),
  ],
};

마무리

AwesomeApp에서는 Webpack을 통해 다양한 환경에서의 모듈 번들링과 성능 최적화를 효과적으로 진행하고 있습니다. 코드 스플리팅, 다국어 지원, 라이트하우스 통합 등의 기능을 활용하여 유지보수성 뛰어난 현대적인 어플리케이션을 제작하는 데 성공하였습니다. 이 경험은 다른 프로젝트에도 적용하여 개발 생산성과 어플리케이션 성능을 향상시키는 데 큰 도움이 될것입니다.