[React] webpack과 babel설정하기

sumin·2023년 4월 10일

Webpack(웹팩)이란?

자바스크립트 모듈 번들러(Module Bundler)
모듈 번들러 : 웹 어플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Image 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 도구

(1) webpack 설치

$ npm init
$ npm install react react-dom
$ npm install -D webpack webpack-cli

npm init package.json 생성
-D : 개발용

(2) babel 설치

javascript compiler
최신 버전의 자바스크립트를 구형 버전의 자바스크립트로 변환 시켜준다.

$ npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader

core : babel의 기본적인 것들
preset-env : babel이 자동으로 최신 문법으로 변경해준다.
- preset-react, preset-typescript : 리액트, 타입스크립트를 자바스크립트로 지원
babel-loader : babel과 webpack을 연결

(3) 웹팩 설정 파일 webpack.config.js 생성

webpack.config.js : webpack 설정
client.jsx : 하나로 만들 파일들을 모아서 불러놓은 파일

// webpack.config.js
const path = require("path");

module.exports = {
  name: "project-name", 
  mode: 'development', // 배포 : production
  devtool: "inline-source-map", // hidden-source-map
  resolve: {
    extensions: [".js", ".jsx"],
  },
  // client.jsx를 대상으로 웹팩이 빌드를 수행
  entry: {
    app: ["./client"],
  },
  module: {
    rules: [
      {
        // babel-loader를 이용해 규칙에 적용
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    ],
  },
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  },
};

entry

입력, 최초의 진입점이자 자바스크립트 파일 경로

client.jsx를 대상으로 웹팩이 빌드를 수행

// client.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import LoginPage from "./LoginPage";

ReactDOM.createRoot(document("#root")).render(<LoginPage />);

엔트리 포인트는 여러 개가 될 수도 있다. (SPA보다는 MPA에 적합)

module(loader)

웹팩이 웹 어플리케이션을 해석할 때, 자바스크립트 파일이 아닌 웹 자원(HTML, font..)들을 변환할 수 있도록 도와주는 속성
test : 로더를 적용할 파일 유형(정규식)
loader : js파일, jsx파일에 babel-loader를 적용하여 호환
- option : babel의 옵션들

output

출력, 웹팩을 돌리고 난 결과물의 파일 경로
path : 빌드한 파일의 경로
- __dirname : 현재 폴더
filename : 웹팩으로 빌드한 파일 이름
extensions : 생략할 확장자 설정

(4) webpack build

//package.json
{
  ...
  "scripts": {
    // npm run dev
    "dev": "webpack" 
  },
  ...
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1"
  }
}

npm run dev 또는 npx webpack

(5) webpack dev server 와 hot loader

1. React Refresh WebPack Plugin, webpack-dev-server 설치

$ npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D
$ npm i -D webpack-dev-server # 개발용 서버

2.package.json 수정

{
 ...
  "scripts": {
    // dev 명령어 변경
    "dev": "webpack serve --env development"
  },
  ...
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "babel-loader": "^9.1.2",
    "react-refresh": "^0.14.0",
    "webpack": "^5.79.0",
    "webpack-cli": "^5.0.1",
     // webpack-dev-server 추가됨
    "webpack-dev-server": "^4.13.3"
  }
}

3.webpack.config.js 수정

// webpack.config.js
const path = require("path");
// refresh 플러그인 불러오기
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  ...
  entry: {
    app: "./client",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: { browsers: ["last 2 chrome versions"] },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: ["react-refresh/babel"], // 추가
        },
        exclude: path.join(__dirname, "node_modules"),
      },
    ],
  },
  plugins: [new ReactRefreshWebpackPlugin()], // 플러그인 장착
  output: {
    ...
  },
  devServer: {
    devMiddleware: { publicPath: "/dist" }, // 웹팩을 생성해주는 경로
    static: { directory: path.resolve(__dirname) },// 실제로 존재하는 정적 파일들의 경로
    hot: true,
  },
};