9단계: Webpack 빌드 도구

9-1. Webpack이란?

Webpack은 여러 개의 파일(js, css, 이미지 등)을 하나로 묶어주는 모듈 번들러입니다.
React 프로젝트는 CRA를 쓰지 않을 경우 Webpack과 Babel을 수동 설정해야 합니다.

9-2. 기본 구성 요소

• Entry: 시작점(js 파일)
• Output: 번들 결과물의 위치
• Loaders: 파일 처리 방법 정의(JSX, SCSS 등)
• Plugins: 추가 기능 수행(HtmlWebpackPlugin 등)

9-3. 프로젝트 초기화 및 설치

npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

9-4. webpack.config.js 예시

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

9-5. Babel 설정 (.babelrc)

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Babel은 최신 자바스크립트와 JSX 문법을 브라우저가 이해할 수 있는 코드로 변환합니다.

9-6. devServer와 자동 리로딩

npm install --save-dev webpack-dev-server

webpack.config.js에 다음 항목 추가:

devServer: {
  static: './dist',
  hot: true
}

9-7. CSS, 이미지 로딩 설정

npm install style-loader css-loader

webpack에 다음 로더 추가:

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

요약

• Webpack은 React 개발에서 필수적인 모듈 번들러
• Babel은 최신 JS와 JSX를 트랜스파일
• HTML 템플릿 처리, CSS 로딩, 개발 서버 설정까지 가능
• 직접 설정을 통해 CRA 내부 동작을 이해할 수 있음

심화학습

Q1. Webpack의 entry가 여러 개일 수 있는 경우는 언제인가요?
A1. 여러 페이지로 구성된 멀티 페이지 앱(MPA)을 구성할 때 entry를 여러 개 둘 수 있습니다.

Q2. Babel과 Webpack은 어떤 차이가 있나요?
A2. Babel은 문법을 변환(transpile)하고, Webpack은 파일을 모듈 단위로 묶는 역할을 합니다. 둘은 목적이 다릅니다.

Q3. 웹팩 설정을 커스터마이징하는 것이 중요한 이유는?
A3. 프로젝트 규모가 커질수록 퍼포먼스 최적화, 코드 분할, 로딩 속도 개선을 위해 설정 제어가 필수적입니다.