CRA 없이 React 설정하기 2

이번 글은 저번 CRA 없이 React 설정하기 1의 react 기본 설정과 eslint, prettier 도입 이후 webpack과 babel을 설정하는 과정을 작성할 예정입니다.

이번 글의 목표는 react 앱에 webpack과 babel을 적용시키는 것입니다. 각 옵션들이 필요한 이유와 목적 등을 이해하면서 글을 작성해보도록 하겠습니다.

 

 

webpack과 babel을 사용하는 이유

webpack은 프로젝트 번들러로 프로젝트에 필요한 자원들을 합쳐주는 역할을 합니다. 여러 개로 나누어진 파일들을 하나로 합쳐줌으로써 네트워크 비용을 줄여줍니다. babel은 트랜스파일링 도구로 최신의 자바스크립트 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법으로 변환해주는 역할을 합니다.

모든 브라우저에서 호환 가능하고 배포, 개발 단계에 최적화할 수 있도록 해주기 위해 이번 글에서 webpack과 babel을 적용해보도록 하겠습니다.

 

 

3. babel 설정

yarn add -D babel-loader @babel/core @babel/preset-env
yarn add -D @babel/preset-react @babel/preset-typescript

• babel-loader, @babel/core, @babel/preset-env

구형 브라우저의 경우 ES6+ 문법을 지원하지 않게 되는데, babel을 통해 ES6+의 문법을 낮은 버전의 자바스크립트로 컴파일하여 사용할 수 있도록 해줍니다.

• @babel/preset-typescript

typescript 사용 시 필요한 babel plugin들의 집합입니다.

• @babel/preset-react

jsx로 작성된 코드를 createElement 함수를 이용한 코드로 변환해주는 플러그인이 내장되어 있습니다.

React 사용 시 필요한 babel plugin집합입니다.

 

◆ babel의 패키지 명에 자주 등장하는 preset은 plugin의 집합을 뜻합니다.

 

3.1 babel.config.json

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

 

 

4. webpack 설정

yarn add -D webpack @types/webpack webpack-cli webpack-dev-server
yarn add -D html-webpack-plugin clean-webpack-plugin

• webpack, webpack-cli

자바스크립트 번들러입니다. 하나의 시작점으로부터 의존적인 모듈들을 전부 찾아내 하나의 파일로 만들어줍니다.

• webpack-dev-server

웹팩을 이용하여 핫리로드가 가능한 개발 서버를 만들 수 있습니다.

• html-webpack-plugin

html 파일을 템플릿으로 생성할 수 있게 도와주는 플러그인입니다. (빌드마다 변경되는 파일에 대한 경로를 설정할 경우 유용합니다. 해당 플러그인이 자동으로 생성된 파일에 대한 <script> 태그를 포함해줍니다.)

• clean-webpack-plugin

webpack에 의해 빌드 된 결과물을 자동 정리해주는 플러그인입니다.

 

4.1 webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

const isDevelopment = process.env.NODE_ENV === 'development';
module.exports = {
  entry: './src/index.tsx',
  mode: isDevelopment ? 'development' : 'production',
  devtool: isDevelopment ? 'eval' : 'hidden-source-map',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: '> 0.25%, not dead',
                debug: true,
              },
            ],
            ['@babel/preset-react', { runtime: 'automatic' }],
            '@babel/preset-typescript',
          ],
        },
        exclude: path.join(__dirname, 'node_modules'),
      }
    ],
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'dist/[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new CleanWebpackPlugin(),
    new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
  ],
  devServer: {
    hot: true,
    port: 3000,
  },
};

• entry : 처음 시작점이 되는 파일
• mode : 현재의 모드에 대한 설정 ('development', 'production')
• devtool
  • production일 경우 'hidden-source-map'. build 속도와 rebuild 속도가 가장 느리지만 프로독션이 가능하고 브라우저 개발 도구에 source map을 노출하지 않으려는 경우에 유용합니다.
  • develop일 경우 'eval' 최대 성능의 개발 빌드에 권장되는 선택입니다.
• resolve : 확장자나 경로를 처리하기 위해 설정하는 옵션
• module : 모듈들을 설정해줍니다.
  • test : regex를 통해 load할 파일을 지정
  • exclude : 제외할 파일을 설정
  • use : 사용할 모듈과 모듈에 대한 옵션 설정
  • babel-loader : webpack에 babel을 추가해줍니다.
    • target : target이 되는 브라우저를 설정
    • @babel/preset-react의 runtime: 'automatic' 설정이 없을 경우 dev모드 시 외부 모듈을 제대로 불러오지 못하는 오류가 생깁니다.
  • webpack에서 설정해주는 모듈은 file-loader(이미지 파일 빌드에 필요합니다.), style-loader, css-loader(css 파일 빌드에 필요합니다.) 등이 있습니다.
• output : 번들화된 파일의 위치를 설정해줍니다.
  • path : 전체 빌드된 파일의 위치
  • filename : 번들화된 파일의 위치
• plugins : 추가된 plugin
  • 위에서 설치해준 html-webpack-plugin, clean-webpack-plugin 등을 선언해줍니다. 또한, 관련 옵션도 설정해줄 수 있습니다.
  • webpack.definplugin, webpack.EnvironmentPlugin을 통해 환경 변수 또한 설정해줄 수 있습니다.
• devServer : webpack-dev-server로 개발 모드로 실행할 경우 설정할 옵션

 

 

 

이번 글에서 webpack과 babel을 적용해주었습니다. 최근 번들링 도구는 parcel, Turbopack 등 다양합니다. 이러한 도구들에 대해서도 학습하는 게 좋을 것 같습니다.

이전 글 부터 CRA를 사용하지 않고 react 앱을 구성해보았는데, 여러 설정들에 대해서는 아직 모르는 부분도 많고 더 학습해야할 부분들이 많은 것 같습니다. 부족한 부분들에 대해서도 학습하고 포스팅해볼 수 있도록 노력하겠습니다!