시작이유

  • 새로 프로젝트를 진행하는데 javascript로된 웹을 그대로 유지하기에는 문제가 있다고 생각
  • 전부 리팩토링을 진행하기로 함
  • 해당 프로젝트는 로스트아크관련 개인 프로젝트인 loa.deokisys.site(도메인 변경될수 있음)
    • 순수 javascript로만 되어있음
    • webpack과 babel을 통해 번들링도 구축되어있음

준비과정

  • 해당 프로젝트의 node가 16정도를 사용중이어서 18버전으로 업그레이드 하고 시작

라이브러리 버전 업그레이드

  • node의 버전을 업그레이드하기때문에 package.json의 라이브러리 전체 업그레이드가 필요했다.
  • 아주 좋은 방법으로 npm-check-updates로 간단하게 해결했다.

npm-check-updates

  • 설치 npm install -g npm-check-updates
  • package.json에 알아서 최신버전업데이트 ncu -u
  • 업데이트된 버전 설치 npm install

웹팩, 바벨

  • 단순히 웹팩이 번들링 하는것에서 react의 jsx형태를 인식하고 번들할 수 있게 해줘야 한다.
  • 바벨도 여러 버전의 브라우저에서 작동하게 해주는것

관련 라이브러리 설치

  • bable관련 npm install --save-dev @babel/core @babel/cli npm install --save-dev @babel/preset-react @babel/preset-env
  • webpack관련 npm install --save-dev webpack webpack-cli webpack-dev-server npm install --save-dev babel-loader css-loader style-loader file-loader npm install --save-dev html-webpack-plugin npm install --save-dev favicons favicons-webpack-plugin

webpack

  • 프로젝트 루트폴더에 webpack.config.js를 생성
const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");

module.exports = {
  // enntry file
  //가장 메인이 되는 파일부터 읽는다, 바벨과 통합 css를 읽는다.
  entry: ["./src/App.jsx", "@babel/polyfill", "./src/sass/main.scss"],
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
    clean: true,
  },
  //server 옵션
  devServer: {
    //react-router를 사용시! url에서 바로 접근하는거 가능하도록
    historyApiFallback: true,
    //contentBase에서 변경됨
    static: {
      directory: "dist",
    },
    // 수정하자마자 바로 적용되는 옵션
    hot: true,
  },
  plugins: [
    // 컴파일 + 번들링 CSS 파일이 저장될 경로와 이름 지정
    new MiniCssExtractPlugin({ filename: "css/style.css" }),
    //기본이 되는 html을 가져온다.
    new HTMLWebpackPlugin({
      template: "./public/index.html",
    }),
    //favicon 인식
    new FaviconsWebpackPlugin({
      logo: "./public/favicon.ico",
    }),
    //자동으로 import React from 'react'선언
    new webpack.ProvidePlugin({
      React: "react",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, //js,jsx파일을 인식
        exclude: /node_modules/,
        use: {
          loader: "babel-loader", //바벨로더를 여기서 사용
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
          },
        },
        // use: "babel-loader",
      },
      {
        test: /\.scss$/, //scss를 인식
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i, //파일 인식
        loader: "file-loader",
        options: {
          publicPath: "",
          // name: 'images/[name].[ext]',
          name: "[name].[ext]?[hash]",
        },
      },
    ],
  },
  resolve: {
    extensions: [".jsx", ".js"], //jsx먼저 써야 Jsx를 우선으로 인식해준다.
  },
  devtool: "source-map",
  // https://webpack.js.org/concepts/mode/#mode-development
};

babel

  • 프로젝트 루트폴더에 .babelrc를 생성
{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

package.json

  • 해당 프로젝트에서 사용하는 package.json의 일부입니다.
    • 내가 만든 react를 확인하고싶다면 npm run dev
    • 서버에 올리겠다 하면 npm run build로 만들어진 dist폴더를 사용
"scripts": {
  "dev": "webpack-dev-server --progress --mode development", //devserver로 바로 확인가능!
  "build": "webpack --progress --mode production", //webpack으로 번들링 해준다!
  "test": "echo \"Error: no test specified\" && exit 1"
},

참고