babel, webpack

https://github.com/ZeroCho/react-webgame

 

ZeroCho/react-webgame

(제로초님의 기본 강의의 코드)

 

https://www.youtube.com/watch?v=d_aytX00fqc&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=29

(제로초님의 기본 강의)

 

https://velog.io/@naseriansuzie/TIL31

TIL - Webpack

기본에 대해 잘 설명되어 있는 글.

 

 

간단한 것만 배워서 이미 만들어져있는 로그인 boiler plate에 cra가 아닌 webpack으로 빌드해보려 했는데 처참히 실패했다. 더 공부하고 시도했어야 했는데 마음이 급했다.

 

조금 코드를 자세히 설명해두고 넘어가는게 좋겠다 싶어서 글을 쓴다.

 

 

const path = require('path');

module.exports = {
  name: 'word-relay-dev',
  mode: 'development',
  devtool: 'eval',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  entry: {
    app: './client',
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {browsers: ['last 2 chrome versions']},
            debug: true,
          }],
          '@babel/preset-react',
        ],
        plugins: ['react-hot-loader/babel'],
      },
      exclude: path.join(__dirname, 'node_modules'),
    }],
  },
  plugins: [],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist',
  },
};

webpack.config.js 코드이다.

 

기본적으로 entry 파일이 들어와 module 속 babel들을 거쳐 output으로 출력된다.

 

client뒤에 .js라는 확장자를 쓰지 않아도 되는 이유는 resolve.extensions에 정의함으로 기본적으로 js와 jsx 확장자는 명시하지 않아도 알아서 찾아준다.

 

@babel/preset-env       내 컴퓨터 환경에 맞춰 알아서 코드를 바꿔준다.

@babel/preset-react     JSX파일로 바꿔준다.

babel-loader    babel과 webpack을 연결한다.

 

 

preset-env의 browser를 저렇게 해놓으면 최근 2개의 크롬 버전만이 이 사이트를 실행시킬 수 있게 된다. 이런 설정이 중요한 이유는 모든 browser에서 작동 가능하게 되면 babel이 처리해야하는 일이 그만큼 증가하고 이는 성능저하의 큰 원인이 된다.

 

client.js

const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root');

const WordRelay = require('./WordRelay');

const Hot = hot(WordRelay); // hoc

ReactDom.render(<Hot />, document.querySelector('#root'));

 

여기서 WordRelay.js 파일은 굉장히 간단한 react 파일이기 때문에 적지 않았다. react 파일을 가져와 Hot에 연결하고 render 시키게 되는데 react hot loader를 사용하는 이유는 파일이 변할 때 마다 알아서 그것을 확인하고 rendering 해주기 위해서 이다. backend이 nodemon이랑 비슷하다고 볼 수 있다. cra로 프로젝트를 만들 경우 이 요소가 기본으로 들어있다. 덕분에 별 짓 안해도 파일의 내용이 수정되면 알아서 새롭게 수정된 내용을 rendering해준다.

 

아직 공부할게 너무 많다..... cra가 얼마나 편한 기능이었는지 깨닫게 되는 순간이면서도 webpack과 babel에 대해 더 궁금해지는 순간이기도 하다.

 

babel - programmer가 작성한 코드를 browser가 해석할 수 있는 언어로 바꿔주는 것.

webpack - 1개의 html파일에 수 천, 수 만개의 script 파일을 사용하는데 이 파일들을 모두 html파일에 넣는다면 성능문제와 변수의 이름 충돌이 발생할 가능성이 매우 높다. 이를 해결하기 위해 나온 것이 webpack이며 webpack은 여러 script 파일들을 하나로 묶어준다.