[React] Webpack

React에 Webpack 사용이 필요한 이유

리액트가 주목받게 된 배경

2010 초중반 주류였던 앵귤러는 프레임워크이기 때문에

- 기본적으로 필요한 코드 양이 많음

- 배우는 시간이 오래 걸림

- 번들 사이즈가 커짐에 따라 성능 문제도 커짐

 

이러한 앵귤러의 단점을 보완하는 대체재로 뷰와 리액트가 거론됨

 

리액트가 주목받은 이유는 프레임워크가 아닌 라이브러리이기 때문인데

프론트엔드 개발에 필요한 최소한의 기능만 담겨있고

추가로 필요한 기능은 개발자가 설치하도록 하여 자유도가 높음

 

그러나 시간이 지나며 개발자의 다양한 니즈를 충족하기 위해 더 많은 라이브러리가 필수적이게 되었고

-> react-dom, react-script, react-router-dom, storybook, styled-component 등

 

① 그러다보니 react 개발진이 create-react-app이라는 툴 체인을 개발하여

초급 리액트 개발자가 리액트에 쉽게 접근할 수 있게 함

 

② 전문 프론트엔드 개발자는 사용자에게 최적의 번들을 제공하기 위해 필요한 라이브러리만 설치함

 

=> ①, ② 두 경우 모두 여러 라이브러리들을 번들링하기 위해 Webpack이 필요하게 되었음

 

 

리액트 개발에 꼭 필요한 라이브러리

react

: 컴포넌트, Hooks, 라이프사이클

react-dom

: 리액트를 브라우저에 보여줌

babel

: JSX를 JS로 변환해줌

css-loader

import로 css가 적용될 수 있게 해줌

리액트 개발에 도움이 되는 라이브러리

react-hot-loader

: 저장할 때마다 변경사항을 개발 환경에 적용해주는 라이브러리(react 17 이하에 사용가능)

eslint

: JS로 개발 시 자주 접하는 에러를 방지하기 위한 린터.

config와 plugin를 잘 조합하여 자주 접하는 에러를 미리 발견하는데 도움을 줌

prettier

: JS로 개발 시 통일성있게 코드 형식을 맞출 수 있도록 도와주는 툴.

eslint와 조합하여 통일된 코드 형식을 강요할 수도 있음

 

 

Babel

최신 자바스크립트 코드(EX6)를 ES5 이하의 코드로 변환시켜줌

babel-loader는 babel을 사용할 수 있도록 도와주는 플러그인같은 느낌

적용을 위해 아래 4개의 라이브러리 필요

babel-loader @babel/core @babel/preset-env @babel/preset-react

 

과제 webpack.config.js 살펴보기

1. path

절대 경로를 지정하기 위한 모듈

2. plugin 받아오기

 

3. mode

development 개발

production 상용화

4. target

브라우저 호환성 관련

5. entry

시작점 설정

6. output

path: 빌드한 파일 저장 위치,

filename: 빌드한 파일 이름 지정. [name]을 사용하여 자동으로 이름지어지도록 할 수 있음,

clean: 빌드할 때마다 이전에 빌드한 파일 지우기

7. module

rules 키가 배열을 가지며 배열은 로더객체를 가짐

로더객체는 test, loader/use, exclude, include 키를 가짐

test: 로더 적용할 파일

loader/use: 해당 파일에 적용할 로더가 하나인 경우 loader, 둘 이상인 경우 로더배열을 가진 use 키 사용

(+ 옵션을 지정해줄 경우 use키가 객체를 가지며 내부 객체의 키로 loader, options를 가짐

babel의 경우 options 내용을 babel.config.js 파일에 따로 적어줄 수 있음)

exclude: 적용하지 않을 파일/폴더

include: 꼭 적용할 파일/폴더

 

style-loader와 mini-css-extract-plugin의 loader가 같은 역할을 하기 때문에 style-loader를 지워줘도 됨

8. plugins

플러그인이 들어있는 배열을 가짐

9. optimization

최적화

 

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  mode: 'development',
  target: ["web"],
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "[name].bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: { 
            presets: [
              '@babel/preset-env',
              ["@babel/preset-react",
              {"runtime": "automatic"}]
            ]
          }
        },
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

 

module.rules[1].use.options를 babel.config.js에 적용

// webpack.config.js
module: {
    rules: [    
      {
        test: /\.js$/,
        loader: "babel-loader",       
        exclude: /node_modules/,
      },
    ],
  },

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    ["@babel/preset-react", {"runtime": "automatic"}]
  ]
}

 

위 과제를 하며 설치한 라이브러리

"devDependencies": {
  "@babel/core": "^7.20.12",
  "@babel/preset-env": "^7.20.2",
  "@babel/preset-react": "^7.18.6",
  "babel-loader": "^9.1.2",
  "css-loader": "^6.7.3",
  "css-minimizer-webpack-plugin": "^4.2.2",
  "html-webpack-plugin": "^5.5.0",
  "mini-css-extract-plugin": "^2.7.2",
  "style-loader": "^3.3.1",
  "webpack": "^5.75.0",
  "webpack-cli": "^5.0.1"
}

 

위와 같은 내용 주석으로 표시

// webpack.config.js
const path = require('path') // 절대 경로 지정을 위한 모듈
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 플러그인
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 플러그인
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // 플러그인

module.exports = {
  mode: 'development',
  target: ["web"],
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "[name].bundle.js", // 동적으로 이름 생성(자동)
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/, // css로 끝나는 파일
        // 로더가 하나면 loader, 둘 이상이면 use
        // mini-css-extract-plugin를 사용한다면 style-loader 필요 없음. 같은 기능을 함
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.js$/, // js로 끝나는 파일
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              '@babel/preset-env',
              ["@babel/preset-react",
              {"runtime": "automatic"}] // 자동 실행을 위한 속성 추가
            ]
          }
        },
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

 

 

 

 

 

2023.01.19

코스 S4U3 리액트 웹팩