[Front] Webpack과 Babel이란?

create-react-app은 리액트 개발에 필요한 웹팩, 바벨, 테스트 라이브러리 등 다양한 환경을 한 번에 제공해줌

Webpack

• 여러개의 파일을 하나로 합쳐주는 모듈 번들러(번들러는 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구) 번들러를 사용하는 이유?
  1. 한번에 많은 요청을 하지 않아도 된다.
      예를 들어 한 웹페이지에서 사용하는 자바스크립트 파일이 10개정도 된다고 가정해보자. 그렇다면 웹 페이지가 로드될 때 자바스크립트 파일 10개롤 모두 네트워크를 통해 요청해서 받아와야 해서 네트워크 병목현상이 발생할 수 있다. 
  
  2. 모듈 단위로 개발하여 유지보수성을 높일 수 있다.
      하나의 파일에 모든 자바스크립트 코드가 있다고 할때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우리가 수정해야 할 코드에 접근하는데 어려움을 느낄 수 있다. 그렇기 때문에 번들러를 사용하면 우리도 이해하기 쉽도록 코드를 모듈 단위로 구분해 가독성과 유지보수성을 효율적으로 개선할 수 있다.
  
  
• css loader 기능: jsx와 같이 자바스크립트를 이용한 마크업 스타일링을 입힐 때는 import "global.css"와 같이 css 파일을 임포트함, 이렇게 css파일을 모듈로 부르기 위해 사용하는 로더가 css-loader임
• jsx 변환 작업: React에서 HTML을 표현할 때, JSX를 사용 빌드 시 Babel에 의해 자바스크립트 언어로 변환되고, Webpack은 JSX를 해석해주는 babel을 적용
• file loader 기능: 웹팍이 파일을 로딩할 수 있도록 도와줌
• html-webpack-plugin: 번들링된 html파일에 css와 js파일들을 추가해줌

$npm i -D webpack webpack-cli webpack-dev-server
$npm i -D babel-loader css-loader file-loader
$npm i -D html-webpack-plugin mini-css-extract-plugin
$npm i -D sass sass-loader

•  webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const prod = process.env.NODE_ENV === 'production';

module.exports = {
  // 모드에 따라 웹팩에서 내장 최적화 제공
  mode: prod ? 'production' : 'development',

  // 소스 맵 생성 여부 및 방법 설정
  devtool: prod ? 'hidden-soure-map' : 'eval',

  // 번들링을 시작할 파일
  entry: {
    index: './src/index.js',
  },

  // 다양한 모듈들(js, image, css 등)을 처리하는 방법 결정
  module: {
    rules: [
      {
        // 처리할 모듈 형식 결정
        test: /.js$/,
        // 이 모듈에 사용할 loader
        use: 'babel-loader',
        // 제외할 파일들
        exclude: /node_modules/,
      },
      {
        test: /\.(sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/dist/static/style/',
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpg|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'static/images',
            },
          },
        ],
      },
    ],
  },

  // 빠르게 개발할 수 있도록 개발서버 제공
  devServer: {
    historyApiFallback: true,
    inline: true,
    port: 3000,
    hot: true,
    publicPath: '/',
  },

  // 번들링 된 파일이 생성될 위치 설정
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'static/js/bundle.js',
  },

  // 적용할 플러그인 목록
  plugins: [
    new HtmlWebpackPlugin({ template: `./public/index.html` }),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({ filename: 'static/style/main.css' }),
  ],
};

Babel

• 트랜스파일러: 틀정언어로 작성된 코드를 비슷한 다른 언어로 변환
  ES6의 기능을 제공하지 않는 브라우저에서 ES5 코드로 변환하여 코드를 실행해야할 필요가 있음
• babel은 wepback과 같은 빌드 시스템과 함께사용, 바벨을 동작하게 하려면 plugin을 설치해야함(plugin이 컴파일을 함)
• 바벨을 웹팩과 연결하면 바벨이 코드들을 트랜스파일링 하면서 웹팩을 통해 모듈을 번들링함
• babel/core: 바벨의 핵심기능이 담겨있는 기본 라이브러리
  babel/preset-"": ESNext 코드를 컴파일 해주는 플러그인 모음 설치
  (env: 기본 js 코드 검사, react: 리액트 코드 검사)
  babel-loader: 웹팩과 바벨을 연동

 @babel/core @babel/preset-env @babel/preset-react babel-loader