[JavaScript] WebPack 과 BaBel

WebPack이란?

• WebPack은 오픈 소스 JavaScript 모듈 번들러이다. React개발시 WebPack을 쓰게 되는데 여러개의 자바스크립트파일들을 한방에 합쳐서 하나의 자바스크립트파일로 만들어주는 역할을 한다.
• Create react app(CRA)를 사용하면 알아서 세팅을 해주는데 개발자라면 이를 커스텀하고 수정할 줄 알아야 하기 때문에 설정 방법에 대해 알아야 한다고 생각한다.
• WebPack을 설치하고 webpack.config.js 파일을 만들어서 커스터마이징을 할 수 있다.
• webpack-dev-server를 설치하면 웹팩으로 번들링한 애플리케이션을 로컬 개발 환경에서 테스트를 해볼 수 있다.

webpack.config.js 예시

const path = require('path'); // node에서 경로 조작 
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');



module.exports = {
  name: 'wordrelay-setting',
  mode: 'development', // 실서비스 : production
  devtool: 'eval', // 실서비스: hidden-source-map
  resolve: {
    extensions: ['.js','.jsx'] // 확장자 처리해줌 
  },

  entry: {  
    app: ['./client'], // 이미 clint.jsx에서 wordRelay를 불러오기 때문에 wordRelay를 적을 필요없음 웹팩이 알아서 처리 
  }, // 입력

  module: {
    rules: [{
      test: /\.jsx?/, // 정규표현식 공부!
      loader: 'babel-loader',
      options: {
        presets: [['@babel/preset-env', {
          targets: {
            browsers: ['> 1% in KR'],
          },
          debug: true,
        }],
        '@babel/preset-react',
      ],
        plugins: ['react-refresh/babel'],
      },
    }],
  },

  plugins: [
    new ReactRefreshWebpackPlugin()
  ],

  output: {
    path: path.join(__dirname, 'dist'), // 현재 폴더안에 있는 dist
    filename: 'app.js',
    publicPath: '/dist/', // 가상의 경로 메모리에 저장
  }, // 출력
  devServer: {
    devMiddleware: { publicPath: '/dist' },
    static: { directory: path.resolve(__dirname) },
    hot: true
  }

};

• entry : 시작하는 파일 입력
• Output : 출력 (결과가 어떻게 나올지)
• Loaders : module
• Plugins : 추가 확장작업
• Mode : development(개발모드) , production(실서비스)
• webpack-dev-server는 webpack.config.js에 적어준대로 빌드의 결과물을 돌린 다음 dist폴더에 결과물을 메모리로 저장한다. -> index.html 실행하면 저장했던 결과물을 제공해준다 -> 핫리로딩으로 소스코드 변경점 감지해서 수정해서 보여준다. 핫리로딩은 새로고침안해도 바꿔주고 기존 데이터 유지, 기존 webpack-dev-server는 새로고침하면 보여주긴 변경사항을 보여주는데 기존데이터가 날라가기 때문에 핫 리로딩을 쓰는게 좋다.

Babel이란?

• JavaScirpt 코드의 트랜스 파일러이다.
• 트랜스파일러란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이다.
• 현재 모든 브라우저가 ES6(최신 문법)을 지원하지 않기 때문에 구버전 기능으로 변환시켜주는 역할을 한다.

Babel 예시 (위 코드 참조)

module: {
    rules: [{
      test: /\.jsx?/, // 정규표현식 공부!
      loader: 'babel-loader',
      options: {
        presets: [['@babel/preset-env', {
          targets: {
            browsers: ['> 1% in KR'],
          },
          debug: true,
        }],
        '@babel/preset-react',
      ],
        plugins: ['react-refresh/babel'],
      },
    }],
  },

• @babel/core : 최신문법을 옛날 문법 지원 가능하게 바꿔준다.
• @babel/preset-env :개인환경에 맞게 알아서 바꿔준다.
• @babel/preset-react : JSX로 바꿔준다.
• babel-loader : 바벨이랑 웹팩을 연결 해준다.

출처 : https://junghyeonsu.tistory.com/277
https://youtu.be/aYwSrzeyUOk?si=wmfMhWn4YrhixeZV