[React] Webpack으로 React 시작하기 1 - webpack, babel-loader

Webpack

Webpack은 모던 자바스크립트 어플리케이션을 위한 모듈 번들러이다.

Webpack은 프론트엔드 개발 환경에서 주로 사용하고 있는 모듈 번들러이다. HTML, CSS, Javascript, 이미지 등을 모두 하나의 파일로 번들링한다. 의존 모듈이 하나의 파일로 번들링된다. 

 

Webpack은 의존하고 있는 여러 모듈을 하나의 asset으로 번들링한다.

React와 Webpack

프로젝트를 시작하면서 Webpack 번들러를 사용해서 리액트 개발 빌드 환경을 직접 구성하기로 하였다.

 

그냥 CRA를 쓰면 안되나?

웹팩 설정은 사실 귀찮고 boilerplate라고 작성해주어야하는 부분이 많아서 이를 간단하게 설정하고 싶은 경우에는 Create React App인 CRA를 사용할 수 있다. 

리액트 공식문서에도 최소한의 툴체인으로 시작하는 방법으로 CRA를 소개하고 있다..ㅎ

하지만 직접 툴체인을 구성해보면서 작동 원리에 대해 학습하는 것이 더 의미 있다고 생각했다. 그동안은 빠르게 프로젝트를 끝내는 것에 비중이 있었다면 이번 프로젝트를 하면서는 학습에 초점을 맞추기로 했다.

 

프로젝트에서 사용할 기술 스택

이 글에서는 아래 기술들을 Webpack과 함께 설치하고 설정 파일을 구성한다.

-	-	버전
패키지 매니저	NPM	8.11.0
UI 라이브러리	React	18.2.0
언어	Typescript	4.9.4
번들러	Webpack	5.75.0
트랜스파일러	Babel	-
스타일링	TailwindCSS
라우팅	React Router
상태 관리	React Query
테스트	Jest, React Test Library	29.3.1 / -
린트 / 포매터	ESLint, Prettier	8.30.0 / 2.8.1

 

 

package.json 구성하기

npm init -y

yes 옵션을 사용해서 package.json 파일을 생성한다.

 

webpack 설치 

npm i -D webpack webpack-cli

webpack 관련 라이브러리를 설치한다. 

 

package.json 명령어 

// package.json
"scripts": {
    "config": "webpack --target=browserslist --entry=./src/main.tsx --output-path=public",
    "dev": "npm run config -- --mode=development"
  },

CLI를 이용해서 webpack 관련 옵션을 설정해서 빌드 및 실행 해볼 수 있다.

 

npm run dev 실행시

 

webpack 개발, 빌드 구성 파일

위처럼 CLI로 직접 명령어에 옵션을 작성해줄 수 있지만 옵션이 많아질 수록 명령어가 길어지고 관리하기가 어려워진다.

개발, 빌드 때 옵션을 설정해주는 파일을 분리해서 작성해준다.

 

webpack 기본 설정

// webpack/webpck.common.js : webpack 기본 설정 파일

import { resolve } from 'node:path';
import paths from "./paths.js";

const commonConfig = {
  target: ["web", "browserslist"],
  entry: {
    app: paths.src,
  },
  output: {
    path: paths.build,
    filename: "[name].bundle.js",
    assetModuleFilename: 'assets/[name].[contenthash][ext][query]',
    clean: true,
  },
  resolve: {
    modules: ["node_modules"],
    extensions: [".js", ".ts", ".tsx"],
  },
};

export default commonConfig;

- entry: 어플리케이션의 최초 진입점

- output: 웹팩을 실행하고 난 결과물의 경로. 어떻게 / 어디에 output을 설정할지에 대해 작성해줄 수 있다.

   - path: output의 경로

   - filename: 번들링이 완료된(웹팩이 실행되고 난) 파일 이름

   - assetModuleFilename: 

   - clean: 내보내기 전에 output 디렉토리를 정리할지 말지

- resolve: 모듈이 해석되는 방식을 변경한다. 

  - extensions: 확장자를 순서대로 해석한다. 파일 이름이 동일하지만 확장자가 다른 경우, 앞에서 부터 해석한다. 이를 사용하면 import할 때, 확장자를 생략할 수 있다. 

 

webpack 개발 설정

// webpack/webpack.dev.js

import { merge } from "webpack-merge";

import commonConfig from "./webpack.common.js";
import devServer from "./server.js";

const devConfig = merge(commonConfig, {
  mode: "development",
  devtool: "eval-cheap-source-map",
  devServer,
});

export default devConfig;

- mode: 개발 환경인지, 배포 환경인지에 대해 작성한다. 

- devtool: 번들링 된 파일과 원본 파일을 연결해주는 소스맵 기능을 제공한다. 번들링된 파일은 읽기 어렵게 난독화가 되기 때문에 어떤 부분에서 에러가 발생하는지 디버깅을 하기 위해서 이용한다.

 

sourcemap 설정 옵션 https://webpack.js.org/configuration/devtool/

Webpack devtool 문서에 sourcemap에 대한 여러가지 옵션이 있고 성능 등에 대한 설명이 있다.

개발 시에는 eval, eval-source-map, eval-cheap-source-map, eval-cheap-module-source-map 네가지를 추천하고 있는데 그 중

 

// webpack/server.js : webpack devServer 설정

const devServer = {
  host: "localhost",
  port: 8000,
  hot: true,
  open: false,
  compress: true,
  liveReload: true,
  static: ["public"],
  historyApiFallback: true,
  client: {
    logging: "info",
    overlay: true,
    reconnect: 3,
  },
  watchFiles: {
    paths: ["src/**/*.*", "public/**/*.*"],
  },
};

export default devServer;

개발 환경에 대한 설정은 관리를 더 쉽게 하기 위해 server.js로 분리했다.

- devServer

  - compress: 압축 활성화 

  - historyApiFallback -> 정리 필요 https://webpack.kr/configuration/dev-server/#devserverhistoryapifallback

DevServer | 웹팩

  - hot: 브라우저를 새로고침하지 않아도 실시간으로 반영해주는 HMR 기능을 사용할 수 있다.

 

webpack 배포 설정

// webpack/webpack.prod.js : webpack 배포 환경 설정

import { merge } from "webpack-merge";

import commonConfig from "./webpack.common.js";

const prodConfig = merge(commonConfig, {
  mode: "production",
  devtool: false,
  output: {
    ...commonConfig.output,
    filename: "[name].min.js",
  },
});

export default prodConfig;

개발 환경과 비슷한 방식으로 배포 설정 파일도 구성한다.

 

 

Webpack 개발 서버 구성

npm i -D webpack-dev-server

웹팩 개발 서버를 사용하면 웹팩 명령어를 매번 실행하지 않고 코드 저장만 하면 브라우저를 새로 고침해준다.

package.json 명령어 구성

// package.json

"scripts": {
    "server": "webpack server -c webpack/webpack.dev.js",
    "bundle": "webpack bundle -c webpack/webpack.dev.js",
    "build": "webpack build -c webpack/webpack.prod.js",
  },

webpack 설정 파일을 이용해서 pacakge.json 명령어를 작성할 수 있다.

- server : 개발 설정으로 서버를 실행한다.

- bundle : 개발 설정으로 번들링한다.

- build : 배포 설정으로 빌드한다.

 

babel loader 설치

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

모든 브라우저가 최신 스펙의 ECMAScript를 지원하지 못하기 때문에 트랜스파일 작업을 통해 하위 브라우저에서도 실행할 수 있도록해야한다. 웹팩에서 Babel-Loader 전처리기를 사용하면 다양한 브라우저에서도 코드가 원활히 작동한다.

 

webpack 기본 설정

웹팩 실행 시 babel-loader가 작동하기 위해 webpack 기본 설정 파일에 추가해준다.

// webpack/webpack.common.js

import { resolve } from 'node:path';

import paths from "./paths.js";

const commonConfig = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  corejs: { version: 3, proposals: true },
                  useBuiltIns: "usage",
                  shippedProposals: true,
                },
              ],
              "@babel/preset-typescript",
              "@babel/preset-react",
            ],
          },
        },
        exclude: /(node_modules)/,
      },
    ],
  },
  ...
};

export default commonConfig;