리액트 webpack으로 빌드하는 방법

 

1. init-y 하기

init -y

 

2. 리액트 파일 만들던가 복사하기

리액트 설치하고 import하기

npm i react react-dom

 

3. 웹팩, 웹팩-cli 설치하기

npm install -D webpack webpack-cli

 

4. 바벨 설치하기

 

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

babel-loader 역할: ES6 => ES3, JSX => JS

나머지 역할 : 바벨 설정값

5. webpack.config.base.js 파일 만들기

 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

https: module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'docs'), // './dist'의 절대 경로를 리턴합니다.
    filename: 'app.bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {
                  browsers: ['last 2 chrome versions'], // 크롬 버전 호환
                },
              },
            ],
            [
              '@babel/preset-react',
              { runtime: 'automatic' },
            ],
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties',
          ],
        }, // 바벨의 옵션 적용
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(
        __dirname,
        'public',
        'index.html'
      ),
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: 'bundle-report.json',
    }),
  ],
};

 

6. webpack.config.dev js 파일 만들기

const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: 'development',
  devServer: {
    port: 3008,
  },
});

7. webpack.config.prod js 파일 만들기

const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: 'production',
});

 

***package.json 의 scripts 참고

 "scripts": {
    "start": "react-scripts start",
    "build": "webpack --config webpack.config.prod.js",
    "dev": "webpack-dev-server --open --config webpack.config.dev.js"
 }

 

dev는 개발자가 쓰는 파일이고, production 파일은 배포용 파일이다. 그래서 package.json 파일의 build 명령어를 보면 prod 파일로 웹팩을 진행하는 것을 볼 수 있다. 

 

 

8. 각종 loader 설치하고 import 하고,,  플러그인에 내용 추가하기

css-loader, style-loader 설치함. babel-loader는 아까 위에서 설치함.

 

 

9. html 설치하고 플러그인에 추가하기

 

 

---

로더와 플러그인의 차이)

로더 다운받으면 임포트 해야한다. 

리액트는 플러그인이 더 자연스럽다.

 

---

깃 배포

dist나 docs 파일로 새롭게 만들어진 파일로 깃 배포를 한다. 

 

배포안되면 readme 삭제하고 푸쉬하기.

 

작업폴더가 하나 더 단계가 들어가있으면 배포가 안되던데 이걸 경로를 줄수있는 방법이 따로 없는건가용

-> 없다. surge, vercel 무료 배포된거 설치해서 다시 해보기

 

npx surge 한번 찾아보기 쉽다고 함.

 

---

더 알아보기

npm fresh

react hot loader

 

---

webpack 참고

 

기본 개념 잡기

https://youtu.be/rbmUFHZt3sg

 

https://pinokio0702.tistory.com/328

 

https://phsun102.tistory.com/43

React - Webpack + Babel 로 프로젝트 생성하기 (tistory.com)

 

https://velog.io/@jangwonyoon/React%EC%97%90%EC%84%9C%EC%9D%98-%EB%B0%94%EB%B2%A8%EA%B3%BC-%EC%9B%B9%ED%8C%A9

 

https://velog.io/@adam2/webpack-dev-server-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%EC%82%BD%EC%A7%88%ED%9B%84%EA%B8%B0

 

webpack-bundle-analyzer

https://satisfactoryplace.tistory.com/359

[React] webpack-bundle-analyzer를 이용한 번들 사이즈 최적화 (tistory.com)

 

Prettier, ESLint로 협업 강화하기

https://onlydev.tistory.com/121

 

[나만의 웹팩 만들기] 4. 개발 환경 구축하기

https://hoilzz.github.io/webpack/4-development-environment/

 

깃 배포 참고

https://codingapple.com/unit/react-build-deploy-github-pages/

만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌 (codingapple.com)

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓