리액트 번들링

내가 했던 프로젝트에다가 번들링을 시도하였다.

npm init -y

npm install -D webpack webpack-cli

이미 리액트돔이 설치가 되어 있어서 바로 웹팩을 설치하였다.

webpack.config.js 를 설정해주었다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다.
    filename: 'app.bundle.js',
  },
};

이후에

npx webpack 를 실행해주면 에러가 여러가지 뜨는데
에러에 맞게 플러그인을 설치해준다.

내가 설치한 플러그인

npm i babel-loader @babel/core -D 
npm i @babel/plugin-transform-runtime \ 
      @babel/plugin-syntax-dynamic-import \
      @babel/plugin-proposal-class-properties -D
      
     
     
     
npm i style-loader css-loader mini-css-extract-plugin -D //css파일을 읽기위해

npm install url-loader file-loader @svgr/webpack -D //이미지 파일 에러 해결위해

npm i html-webpack-plugin -D //html플러그인

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'assets/images/[name].[hash:8].[ext]',
            }
          }
        ]
      },
      // SVG 로더
      {
        test: /\.svg$/i,
        use: ['@svgr/webpack'],
      },
      // 웹폰트 로더
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/fonts/[name].[hash:8].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

다 설정해주면 에러가 사라지고 번들 파일이 만들어집니다.

webpack 5.75.0 compiled with 1 warnings in 5362 ms