Webpack과 babel을 이용한 react 초기 설정

김민석·2021년 3월 26일
0

react

목록 보기
4/11

용도

1. Webpack

Webpack은 CSS, JS, JSX 등의 파일을 한데 모아서 쓰까버리는 모듈이다.

덕분에

<html>
    <head>
    </head>
    <body>
        <div id = "root"></div>
        <script src = './dist/app.js'></script>
    </body>
</html>

이렇게 하나만 땡그라니 html에 붙이면 모든 파일을 다 적용시킬 수 있게 된다.

2. babel

바벨은 실험적인 문법들을 정통! 문법으로 변환시키거나, 최신 문법으로 작성된 자바스크립트를 브라우저와의 호환을 위해서 이전 버전의 문법으로 재작성 해주는 등의 역할을 하는 컴파일러이다.(개좋다)


React를 위한 최초 설정법

템플릿

기본적인 로더들의 사용 방법이 webpack 공식 사이트에 존재한다.
troubleshooting 같은 것도 있으니 참고하면 좋을 것으로 보인다.

babel-loader 페이지

npm install 해아하는 것들


dependencies

  1. react
  2. react-dom

devdependencies

  1. @babel/core >> 기본적인 것이라고 하는데 아직은 뭔지 모르겠다.
  2. @babel/preset-env >> 브라우저 호환을 위한 프리셋
  3. @babel/preset-react >> JSX 등의 문법을 JS에 맞게 변환

webpack.confing.js

이 부분이 가장 어렵다.
설정해야하는 것들이 많은데,
어떤 설정 요소를 건드려야 하는지, 그 설정 요소를 어떻게 건드려야 하는지 알기가 쉽지 않기 때문이다.

공식 문서도 길이가 꽤 길다...

제로초의 설정을 따라한 것

const path = require('path')

module.exports = {
    name: 'wordrelay-setting',
    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: ['> 1% in KR'],
                  },
                  debug : true], '@babel/preset-react']
            }
        }],
    },
    output : {
        path : path.join(__dirname + '/dist'),
        filename : 'app.js',
    }, //출력

}

요소를 조금씩 살펴보는 방식으로 보는 게 좋을 것 같다.

  1. name : 이 설정의 이름이라고 생각하면 된다. (여러 개의 환경설정을 로딩할 때 사용된다고 한다.)

  2. mode : 배포 할 때는 production으로, 개발할 때는 development로 바꾸라고 한다.
    두 가지의 간단한 차이를 알아본 바, 다음과 같이 요약할 수 있다고 한다.

    Webpack has two modes of operations: development and production.

    The main difference between them is that production mode automatically applies minification and other optimizations to your JavaScript code.

  3. devtool : 소스맵을 이용하여 원본 소스랑 매핑할 수 있게 설정하는 부분이라고 한다. (무슨 부분인지 모르겠네..)

  4. resolve : 호출하는 모듈의 해석 방식을 설정하는 것이다.

    예를 들어,
    제로초는 extionsions로 모듈들의 확장자를 지정해 주었다.

    resolve에는 여러가지 option들이 있는 것으로 보인다.
    그 밖에도 참고 할 만한 용법들이 있다.

  5. module: module의 종류에 따라 대응하는 방식을 결정한다.

    module의 세부 사항에 대해서 설명해보자면,
    우선 Rule은 조건 / 결과 / 세부 규칙 으로 나눌 수 있다.

    * 조건

    the resource에 적용되는 test, include, exclude
    the issuer에 적용되는 issuer 등이 있다.

    예를 들어,
    import './style.css'app.js에 적용되어 있다면, style file은 resource고 app.js는 issuer다.


    * 결과

    Rule 조건이 만족되면 사용되는 것이다.

    1. 적용될 loader : resource에 적용될 로더
    2. parser options : parser를 만드는데 사용되는 option을 뜻한다.

    loader에 관련된 것은 : loader, options, use가 있다.
    options나 presets 같은 것은 loader에 따라 달라지는 속성이다. 이 부분에 대한 설명은 babel 문서에서 확인할 수 있다. @babel/preset-env


    * 세부 규칙

    rules나 oneof 를 통해 조건에 걸렸을 때, 또 그 안에서 세부적인 규칙을 지정해 줄 수 있는 것으로 보인다.
    현재로선 세부적인 사용법을 알 필요가 없을 것으로 보인다.


  1. entry와 output
  • entry : building을 시작하는 곳 (혹은 곳들)
  • output : bundle을 어디에, 그리고 어떻게 만들지에 대해 지정할 수 있는 곳

그 밖에..

plugin 같은 것들이 또 있다.
로더가 변환 과정에 관여하는 반면, 플러그인은 변환 결과물의 형태를 입맛에 맞게 바꾸는 역할을 한다.
플러그인에 대한 설명

0개의 댓글