S4) Unit 3. [실습] 리액트 웹앱 번들링 후 배포하기

📣  나만의 아고라스테이츠(리액트 리팩토링) 웹앱 번들링 후 배포하기

📚 참고 : https://velog.io/@seul_/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9B%B9%EC%95%B1-%EB%B2%88%EB%93%A4%EB%A7%81-%ED%9B%84-%EB%B0%B0%ED%8F%AC%EC%9B%B9%ED%8C%A9%EC%9C%BC%EB%A1%9C-CRA%EC%97%86%EC%9D%B4-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95

 

🚨 냅다 따라하다가 뭐 잘못만졌는지 리액드 앱 자체가 안켜져서 새 플젝 만들었다..

서버랑 연결 어떻게 하는건데..

 

𝟭. 개발환경 초기화

npm i -y

 

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

npm i react react-dom

 

𝟯. 웹팩 설치

npm i -D webpack webpack-cli

 

𝟰. package.json 수정

 "build": "webpack",

➰ build를 webpack으로 수정해준다.

 

𝟱. 바벨 설치

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

➰ JSX문법으로 작성된 코드는 바벨을 통해서 JS코드로 변환해서 번들링 해줘야 한다.

 

𝟲. CSS 번들링

npm i -D css-minimizer-webpack-plugin

npm i -D mini-css-extract-plugin
// CSS 파일을 한줄로 압축

 

𝟳. HTML 번들링

npm install -D html-webpack-plugin

 

𝟴. loader 설치

npm i file-loader -D

➰ 이미지 파일을 번들링 하기 위해서 설치해줘야 한다.

➰ 처음에 안해줬더니 에러남..

 

𝟵. 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 = {
  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/,
      },
      {
        test: /\.jpeg$/,
        use: [
         {
           loader: 'file-loader',
           options: {
             name: '[name].[ext]'
             // 이름이 랜덤한 해시값으로 생성되는 것을 막기 위해 이름을 따로 설정해준다.
            }
          },
        ],
 }  ,
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // css를 줄여주는 플러그인
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
};

 

𝟭𝟬. 빌드하기

npm run build

➰ 깃허브에 배포할거기 때문에 처음부터 docs 폴더에 빌드 해줬다.

 

🔗 배포 링크

https://jieuny0314.github.io/Agorastates-react/

React App