[React] CRA 없이 리액트 앱 만들기: Webpack 설정하기

이전 포스팅에서 CRA 없이 리액트 앱을 만들기 위한 기본적인 프로젝트 구조를 살펴보았다.

이번에는 모듈 번들러인 Webpack을 설정하는 방법에 대해 알아볼 것이다.

1. Webpack이란?

Webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. 웹팩은 애플리케이션을 처리할 때 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.

Webpack의 주요 개념
- Entry: 디펜던시 그래프를 만들기 위해 사용해야 하는 시작점
- Output: 생성된 번들을 저장할 위치와 이름 지정
- Loaders: 웹팩이 기본적으로 이해하는 JavaScript와 JSON 파일 이외의 다른 유형의 파일을 처리
- Plugins: 번들 최적화, 에셋 관리 등 다양한 작업 수행

2. 필요한 패키지 설치

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env
npm install --save-dev html-webpack-plugin css-loader style-loader

3. Webpack 설정하기

프로젝트 루트 디렉토리에 `webpack.config.js` 파일을 생성하고 다음과 같이 설정한다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    // 모든 asset의 기본 경로
    publicPath: "/",
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "@pages": path.resolve(__dirname, "src/pages"),
      "@components": path.resolve(__dirname, "src/components"),
      "@layouts": path.resolve(__dirname, "src/layouts"),
      "@features": path.resolve(__dirname, "src/features"),
      "@hooks": path.resolve(__dirname, "src/hooks"),
      "@types": path.resolve(__dirname, "src/types"),
      "@context": path.resolve(__dirname, "src/context"),
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    port: 3000,
    open: true,
    //  Client side routing
    historyApiFallback: true,
  },
};

4. package.json 스크립트 추가

{
    "scripts": {
        "start": "webpack serve",
        "build": "webpack --mode production"
    }
}

5. 주요 설정 항목 설명

Entry Point (진입점)

  entry: "./src/index.tsx",

- 애플리케이션의 진입점을 지정하고 여기서부터 시작하여 필요한 모든 모듈을 찾아낸다.

Output (출력)
- 번들된 파일의 출력 위치와 이름을 지정하고 `clean: true`로 설정하여 빌드 시 이전 빌드 파일들을 자동으로 정리한다.

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
}

Loaders (로더)

  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
    ],
  },

- 각각의 파일 타입을 어떻게 처리할지 정의하고 babel-loader: JSX와 최신 JavaScript를 브라우저가 이해할 수 있는 형태로 변환한다.
- css-loader: CSS 파일을 모듈로 변환
- style-loader: 변환된 CSS를 DOM에 주입

Plugins (플러그인)

plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html',
    })
]

- HtmlWebpackPlugin: HTML 파일을 생성하고 번들된 JavaScript 파일을 자동으로 주입한다.

Development Server (개발 서버)

devServer: {
    static: {
        directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 3000,
    open: true,
    hot: true,
}

- webpack-dev-server 설정으로 개발 환경을 구성하고 hot: true 설정으로 핫 리로딩을 활성화한다.

 

 

https://github.com/chaeyoo/react-wo-cra