[React] CRA없이 React+ Typescript + Webpack + babel 환경 구성하기 - 2022.06.05 기준

📍 들어가며

CRA로 간단하게 리액트 + 타입 스크립트 프로젝트를 생성할 수 있지만 웹팩과 바벨을 공부할 겸 환경을 직접 구성해보기로 했다
참고로 CRA로 생성된 프로젝트에서 yarn eject (npm run eject) 명령어를 입력하면
숨겨진 웹팩과 바벨 설정이 나타나고 이를 커스터마이징 하는 방법도 있다.

이 글은 2022년 6월 5일에 React 18 + Typescript + Webpack 5 + Babel 7 기준으로 작성되었으며
패키지 매니저는 yarn, IDE는 VSCode를 사용했습니다

---

1.  프로젝트 초기화

먼저 root 폴더 생성 후 해당 위치에서 아래 명령어로 프로젝트를 초기화시켰다
초기화를 하면 package.json 파일이 생성된다

yarn init -y

 

2. React 구성하기

리액트를 사용하기 위한 필수 라이브러리인 react와 react-dom을 설치

yarn add react react-dom

 

3. 타입 스크립트 구성하기

타입스크립트는 컴파일 타임에만 필요하므로 devDependency로 설치했다
이 경우 tsconfig 파일 생성을 위해 ./node_modules/.bin 경로로 이동한 다음 tsconfig 파일을 생성해야 된다

yarn add -D typescript @types/react @types/react-dom ts-loader // 설치
cd ./node_modules/.bin // 경로 이동
yarn tsc --init // tsconfig 생성

 

생성된 tsconfig 파일에는 아래와 같이 주석이 담겨있는데 각자 필요에 맞게 tsconfig 파일을 설정해주면 된다

생성된 tsconfig 파일

예시) tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",// 타입스크립트 파일을 컴하일 했을때 생성되는 자바스크립트의 버전 ex) 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 
    "module": "ES6", //어떤 방식으로 module을 내보내고 불러올지. 'commonjs' -> require / 'es2015', 'esnext' -> import export / 'amd', 'system'
    "allowJs": true, // js 파일을 ts에서 불러올 수 있는지
    "checkJs": true, // js 파일에서도 에러체크 할지
    // "strict": true, // stric 관련 모드 전부 on
    "lib": ["es2015", "dom", "dom.iterable"],// 타입스크립트 -> 자바스크립트 컴파일할 때 포함될 라이브러리의 목록.
    "removeComments": true, //컴파일시 주석제거 
    "rootDir": "src", // root 디렉토리
    "outDir": "dist", // 컴파일 후 생성되는 자바스크립트 파일이 저장될 디렉토리명
    "jsx": "react-jsx", // tsx 파일을 사용하므로 react가 아닌 react-jsx로 설정
    "sourceMap": true, //빌드시에 map 파일을 생성할지
    "declaration": true, /* '.d.ts' 파일 생성 여부. */
  },
  "include": ["src/**/*"] // src 하위 모든 파일을 타입스크립트로 설정
}

 

3. 바벨 구성하기

yarn add -D @babel/core @babel/cli babel-loader 
yarn add -D @babel/preset-env @babel/preset-react @babel/preset-typescript
touch babel.config.js// 바벨 config 파일 생성

 

예시) babel.config.js 파일

 

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript",
  ],
};

 

4. 웹팩 구성하기

번들러 모듈인 webpack
webpack 명령어를 사용할 수 있게 해주는 webpack-cli
개발할 때 live server로 변경사항을 보여주기 위한 webpack-dev-server
html과 favicon파일 등을 번들링에 포함시켜주는 html-webpack-plugin 
빌드 후 사용하지 않는 모든 웹팩 자산을 제거해주는 clean-webpack-plugin

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin

 

 

예시) webpack.config.js파일 설정

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


module.exports = (env, argv) => {
  return {
  entry: `${path.resolve(__dirname, "./src")}/index.tsx`, 
  output: {
    path: path.join(__dirname, "/dist"), // 번들링 결과 위치
    filename: "bundle.js", //  번들링된 파일명
  },
  mode: "development",
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
        {
            test: /\.(ts|tsx)?$/, // 어떤 파일을 변환할지
            exclude: /node_modules/,
            use: ["ts-loader"], // 어떤 loader를 사용할지
        },
        {
            test: /\.(js|jsx)?$/, // 어떤 파일을 변환할지
            exclude: /node_modules/,
            use: ["babel-loader"], // 어떤 loader를 사용할지
        }
    ],
  },
  devServer: {
    hot: true,
    port: 3000,
  }, // 
  plugins: [
    new HtmlWebpackPlugin({ // html 파일에 웹팩으로 빌드한 번들링 파일을 자동으로 추가해주는 플러그인
        template: "./public/index.html", // html 파일이 위치하는 경로
      }),
    new webpack.ProvidePlugin({ // 자주 사용하는 모듈을 미리 등록
      React: "react",
    }),
    new webpack.HotModuleReplacementPlugin(), // webpack-dev-server 사용을 위한 플러그인
    new CleanWebpackPlugin(), // 빌드할때 마다 dist 폴더를 삭제한 다음 다시 생성
  ],
  }
};

 

 

5. 실행

기본적인 setting은 끝이 났고 이제 빌드가 잘되는지 확인을 해야 된다.
먼저 현재까지 생성된 디렉터리 구조는 아래와 같다

├── node_modules
├── package.json
├── tsconfig.json
├── webpack.config.js

여기에 앞서 웹팩 config파일에 작성했던 Entry 포인트 파일과 html 파일을 만들어야 한다.
/public/index.html과 /src/index.tsx 파일을 생성!

예시) src/index.tsx

import { createRoot } from "react-dom/client";

const container = document.getElementById("root");
const root = createRoot(container as Element);

root.render(<div>Hello world</div>);

 

예시) public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

 

이 두 파일을 생성했다면 현재까지의 디렉토리 구조는 아래와 같다.

├── package.json
├── public
│   └── index.html
├── src
│   └── index.tsx
├── tsconfig.json
├── webpack.config.js

 

자 이제 진짜 실행을 위해 package.json에서 script 명령어를 정의해준다.

{
  "name": "pure-template",
  "version": "1.0.0",
  "main": "index.tsx",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode=development --open --hot --progress", // 추가
    "build": "webpack --progress" // 추가
  },
  "dependencies": {
   //  ...code
  },
  "devDependencies": {
    // ...code
  }
}

 

그다음 yarn build를 실행해보면 root에 dist 폴더가 생성되고 그 아래 번들링 된 파일들이 함께 생성된다

 

개발을 위해 webpack-dev-server도 실행해보자!
yarn start를 입력하면 webpack config 파일에서 설정한 3000 포트로 브라우저가 열리고
index.tsx에서 작성한 Hello world가 보인다!

---

여기까지 CRA 없이 기본적인 리액트 + 타입스크립트 + 웹팩 + 바벨 설정하기 끝입니다
전체 코드를 확인하고 싶으시면 여기를 클릭해주세요

 

---

잘못된 정보가 있다면 댓글로 알려주세요!

---