[React] Babel과 webpack 알아보기

 

 

Babel 이란?

JavaScript는 버전에 따라 문법이 조금씩 바뀌면서 다른 버전간의 문법적 호환성이 떨어지는데 이를 보완하기 위해 Babel이 등장했습니다. 쉽게 말해 JavaScript 변환기로 최신의 JavaScript 문법을 오래된 버전의 JavaScript로 변환하여 호환성을 유지하게 해줍니다.

 

React에서 Babel

React에서는 JSX라는 문법을 사용하게 되는데 JSX는 JavaScript 안에서 UI구조를 직관적으로 표현할 수 있게 해주지만 웹 브라우저에서 직접 실행될 수 없습니다. 따라서 Babel이 JSX를 일반 JavaScript로 변환해주는 역할을 수행합니다.

 

JSX 문법

const element = <h1>Hello, world!</h1>;

JavaScript 문법으로 변환

const element = React.createElement('h1', null, 'Hello, world!');

 

Webpack 이란?

Webpack은 JavaScript와 관련된 모든 파일 및 자원을 처리하고 종속성을 관리하여 최종적으로 하나 또는 몇개의 번들 파이로 출력하는 정적 모듈 번들러를 말합니다. Webpack이 애플리케이션을 처리할 때 내부 적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다. 

Webpack의 확장성 덕분에 다양한 플러그인과 로더를 활용하여 복잡한 프로젝트 요구사항을 충족 시킬 수 있어 React 애플리케이션을 개발하고 배포할때 사용되는 중요한 도구입니다.

 

주요 구성

Entry : Webpack이 어디서부터 애플리케이션의 디펜던시 그래프를 시작하는지를 정의하며 엔트리 포인트가 의존하는 다른 모듈과 라이브러리를 찾아냅니다.

Output : 번들이 어떻게, 어디에 저장될지 정의합니다. 기본 출력 파일의 경우에는 ./dist/main.js , 생성된 기타 파일의 경우 ./dist 폴더로 설정됩니다.

Loaders : Webpack은 기본적으로 JavaScript 및 JSON 파일만 이해하기 떄문에 Loader를 사용하면 다른 유형의 파일을 처리하거나 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다.

Plugins : 번들 최적화, 자산 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행합니다.

Mode : 개발 또는 프로덕션 또는 none으로 설정하여 Webpack에게 어떤 종류의 최적화를 수행해야 하는지 알려줍니다. 기본값은 프로덕션입니다.

 

Webpack 예제 설정

// 필요한 플러그인을 가져옴
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 엔트리 포인트: Webpack이 애플리케이션의 종속성 그래프를 작성하기 시작하는 파일
  entry: './src/index.js',
  
  // 출력 설정: 번들된 파일의 이름 및 저장 위치를 정의
  output: {
    filename: 'bundle.js',          // 생성될 번들의 파일 이름
    path: __dirname + '/dist'      // 번들이 저장될 디렉토리
  },
  
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,       // .js 및 .jsx 확장자를 가진 파일에 적용
        exclude: /node_modules/,   // node_modules 디렉토리를 제외
        use: 'babel-loader'        // babel-loader를 사용하여 Babel 변환 적용
      },
      {
        test: /\.css$/,             // .css 확장자를 가진 파일에 적용
        use: ['style-loader', 'css-loader']  // CSS 파일 처리를 위한 로더
      },
      {
        // 이미지 및 폰트 파일 처리를 위한 패턴
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: 'file-loader'         // file-loader를 사용하여 파일 처리
      }
    ]
  },
  
  plugins: [
    // HtmlWebpackPlugin을 사용하여 HTML 파일 생성 및 템플릿 기반 처리
    new HtmlWebpackPlugin({
      template: './src/index.html'  // 사용할 HTML 템플릿의 경로
    })
  ]
};