[React] 🧤CRA 없이 Webpack으로 React 환경 구성하기

▷ 리액트에서의 Webpack

create-react-app의 거대한 라이브러리 목록을 줄이고자
직접 웹팩을 설치하여 하나씩 리액트와 그에 필요한 라이브러리를 설정할 수 있다.

❗️리액트 개발에 꼭 필요한 라이브러리
− react, react-dom
− babel
− css-loader

❗️리액트 개발에 도움이 되는 라이브러리
− react-hot-loader
− eslint
− prettier

---

🧤 최종 구성 파일들

// 기존에 만들어뒀던 React폴더에서
src/components
src/public/index.html
src/styleCss
src/App.js
src/index.css
src/index.js
.gitignore
// 위 파일들을 제외한 나머지 파일은 전부 삭제하고 시작하였다.

---

🧤 start!

// package.json 생성, "script"에 "build: webpack" 추가하기
npm init -y

// 웹팩 설치하기
npm i -D webpack webpack-cli

// 리액트 라이브러리 설치
npm i react react-dom

// 바벨 설치
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

---

🧤 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'docs'),
    filename: 'app.bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react', { runtime: 'automatic' }],
            ],
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
}

---

🧤 CSS를 번들에 포함하기

// 설치 후 사용
npm i -D css-minimizer-webpack-plugin
npm i -D mini-css-extract-plugin
npm i -D css-loader

-------
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
      exclude: /node_modules/,
    },
  ],
optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // css를 줄여주는 플러그인
    ],
  },
plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css',
  }),
],

---

🧤 HTML을 번들에 포함하기

// 설치 후 사용
npm i -D html-webpack-plugin

-------
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

---

🧤 webpack-dev-server

// 설치 후 사용
npm i -D webpack-dev-server

-------
/* webpack.config.js */
devServer: {
  static: "./docs",
  port: 3001,
},

-------
/* package.json */
"scripts": {
   "build": "webpack",
   "dev": "webpack serve --open --mode=development", // 추가
   "start": "react-scripts start",
 },

---

🧤 webpack-bundle-analyzer

번들 파일의 크기 및 종속성을 시각적으로 분석할 수 있는 도구이다.
크기, 색상 등으로 시각화된 그래프를 통해 번들 파일의 구성을 쉽게 이해할 수 있다.

// 설치 후 사용
npm i -D webpack-bundle-analyzer

-------
/* webpack.config.js */
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
  
plugins: [
  // 이 플러그인은 빌드할 시 이렇게 따로 설정해줄 수도 있다.
  new BundleAnalyzerPlugin({
    //분석 모드는 뭘로 할 건지
    analyzerMode: "static",
    //빌드하고 나서 바로 열 건지
    openAnalyzer: false,
    //파일 만들 건지
    generateStatsFile: true,
    //파일 이름 뭘로 할 건지
    statsFilename: "bundle-report.json",
  }),
],
/* package.json */
"scripts": {
   "analyze": "webpack-bundle-analyzer ./docs/bundle-report.json --default-sizes gzip", // 추가
 },

---

🧤 eslint

코드의 문제가 없는지 검사해준다.

// 설치 후 사용
npm i -D eslint eslint-plugin-react @babel/eslint-parser

-------
/* package.json */
"lint": "eslink ./src", // script에 추가

웹 접근성에 대해서 지켜야 하는
부분을 알려주는 eslint rule을 추가 설치해 준다.

// 설치 후 사용
npm i -D eslint-plugin-jsx-a11y

-------
/* .eslintrc.js */
module.exports = {
  parser: "@babel/eslint-parser",
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: "module",
  },
  settings: {
    react: {
      version: "18.2.0",
    },
  },
  plugins: ["react"],
  rules: {
    "react/react-in-jsx-scope": 0,
    "react/jsx-uses-react": 0,
    "react/prop-types": 0,
  },
};

---

🧤 prettier

코드의 형식을 통일시켜준다.

// 설치 후 사용
npm i -D prettier

-------
/* .prettierrc.js */
module.exports = {
  singleQuote: true,
  jsxSingleQuote: true,
};

---

🧤 최종 코드 - webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // css를 줄여주는 플러그인
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: "bundle-report.json",
    }),
  ],
  devServer: {
    static: "./docs",
    port: 3001,
  },
};

🧶Webpack 사용법 보러가기
👉 Webpack 공식문서
👉 CRA와 next.js, CRA와 Vite를 잘 비교한 글