리액트 웹앱 번들링 후 배포

1. 개발환경 초기화

 

npm i -y

 

 

 

2. 리액트 라이브러리 설치

 

npm i react react-dom

• react : 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 들어있는 코어 라이브러리
• react-dom : 리액트와 DOM 연결

 

 

 

3. 웹팩 설치

 

npm i -D webpack webpack-cli

• webpack: 웹팩 코어
• webpack-cli: 터미널에서 웹팩 사용

 

 

 

4. 바벨 설치

 

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

• babel/core : 바벨 코어
• babel/preset-env : ES6+ 코드를 ES5 코드로 변환시켜줌
• babel/preset-react : jsx지원
• babel-loader : 바벨과 웹팩을 연결

 

 

webpack.config.js 파일 설치한다.

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

module.exports = {
  entry: './src/index.js', // 빌드 시작 위치
  output: {
    // 빌드결과 저장 위치
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'docs'),
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react', { runtime: 'automatic' }],
            ],
          },
        },
      },
    ],
  },
};

 

 

 

5. CSS 번들링

 

npm i -D css-minimizer-webpack-plugin

npm i -D mini-css-extract-plugin

• mini-css-extract-plugin은 css 파일을 한줄로 압축

 

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

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

module.exports = {
  entry: './src/index.js', // 빌드 시작 위치
  output: {
    // 빌드결과 저장 위치
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'docs'),
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react', { runtime: 'automatic' }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // css를 줄여주는 플러그인
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
};

// index.js 

import style from './index.css'

index.js 파일에 css파일이 import 된 것을 확인하고 빌드한다.

 

 

 

HTML 번들링

 

npm install -D html-webpack-plugin

 

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 = {
  entry: './src/index.js', // 빌드 시작 위치
  output: {
    // 빌드결과 저장 위치
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'docs'),
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react', { runtime: 'automatic' }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // css를 줄여주는 플러그인
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
};

 

➡️ 최소한의 웹팩 설정하기✨