[React] Webpack과 Babel

Webpack(웹팩)

개발 단계 중 빌드(번들링)라 부르는 단계가 있습니다.

이 단계에서 가장 중요한 부분은 packaging(패키징) 잘 감싸 포장하는 것입니다.

 

즉, 빌드 단계에서 빌드 스크립트가 소스 파일과 node.js의 의존 패키지들을 가지고 브라우저가 성공적으로 실행하게 하는 하나의 file로 변환합니다. (node.js로 개발을 하면 의존하는 모듈이 엄청나게 많아집니다. -- 하나의 js로 패키징)

물론, 라이브러리만 모아둔 JS / 핵심 로직이 들어간 JS처럼 나눠서 생성할 수도 있습니다.

 

Webpack은 이런 build tool 중 하나로 아래의 그림처럼 서로 의존적인 파일들(import/ require)을 축소하고 unit test도 수행하며 애플리케이션에 필요한 resource들(image/font ...)을 효율적으로 관리하고 패키징까지 진행합니다.

 

한마디로 웹 애플리케이션을 만들 때 파일들을(.js/.css/.img/etc...) 관리해주는 도구입니다.

 

공식 도큐먼트 : https://webpack.js.org/ 

npm을 설치해서 npm으로 install 후 사용했습니다. yarn을 쓰시는 분은 yarn 사용법 대로 진행하시면 됩니다.

npm install -D webpack
npm install -D webpack-cli

import path from 'path'

module.exports = {
    //entry 프로퍼티: 애플리케이션의 집입점
    entry: './source/app.js',
    //output 프로퍼티: 웹팩에게 결과 번들 파일을 출력할 곳을 알려준다.
    output: {
        path: path.resolve(__dirname, 'build'),
        //applicaiton.js의 이름으로 output한다.
        filename: 'application.js'
    },
    //module프로퍼티: 모든 js파일을 모듈로 취급해준다.
    module: {
        //rules프로퍼티:  배열에서 각 규칙은 여러 소스파일로부터 웹팩 모듈을 어떻게 만드는지 설명.
        rules: [
            {
                test: /\.js$$/, //RegEx로 .js 파일과 일치하는 걸 찾아줌. 이 규칙이 적용되는 파일(.js)을 웹팩에 알려줌
                //use프로퍼티: 적용할 변환 리스트를 설명
                use: [
                    {
                        //loader프로퍼티: 웹팩에게 어떤 로더가 변환 수행하는 지 알려줌
                        loader: 'babel-loader', 
                        //바벨로더는 es6, react 고유구문을 일반js로 변환하는 로더. 
                        //바벨로더는 바벨트랜스파일러 사용!    
                        //options프로퍼티: 어떤 옵션을 해당 로더에게 전달해야 하는 지 알려줌
                        options:{
                            present: ['react','latest'],
                            plugin: ['transform-class-properties']
                        }
                        
                    }
                ]
            }
        ]
    }
};

 

Babel?

바벨은 모던 자바스크립트(ES6이상) 코드를 ES5 이하로 코드를 트랜스파일링 합니다. 

굳이 왜? ES6 이상의 기능들을 IE와 구형 브라우저에서는 지원하지 않는다 ㅜㅜ. 따라서 모든 브라우저를 아우르는 애플리케이션 구현을 위해서 ES5이하의 버전으로 트랜스파일(변환)할 필요가 있다. 

 

//ES6+
const args = [5,10,15];
const arr = ()=>{
	console.log(argument[0]);
}
arr(); //output:  1

// arrow function은 es6문법이므로 es5로 트랜스파일하면 아래와 같은 코드로 변환

//ES5이하
const args = [5,10,15];
const arr = function(){
	console.log(argument[0]);
}
arr();

 

 

바벨 설정 파일

테스트 관련 모듈(jest같은 unit test모듈)이나 트랜스파일과 관련 모듈은 서비스 운영에 해당하는 모듈이 아니고 개발 단계에서 필요한 dependency모듈은 devDependencies에 설치합니다. 

'npm install -d 모듈이름'

 

(devDependency) 

babel-core

babel-loader : es6및 리액트 고유 구문을 JS로 변환하는 로더

babel-preset-latest  : es6+ 이상의 구문을 기존 es5이하 JS로 트랜스파일

babel-preset-react  : 리액트 고유 구문을 일반 JS코드로 트랜스파일

babel-plugin-transform-class-properties : 클래스 프로퍼티를 트랜스파일

 

현재는 react와 latest를 preset했는데 babel-preset-env도 공식 프리셋이며 필요한 plug-in들을 프로젝트의 지원에 맞춰서 동적으로 결정해줍니다.

 

webpack에서 바벨을 로더로 사용했기때문에 package.json에 start라는 스크립트를 추가하고

npm start / npm run start를 실행하면 트랜스파일 후 소스 파일을 묶습니다. 해당 프로젝트에서는 webpack.config.js파일을 사용해 출시용으로 소스 파일을 번들로 묶도록 웹팩을 실행합니다. 실행되면 application.js이름으로 build파일에 생성되는 것을 확인할 수 있습니다.

{
  "name": "application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack -p --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

 

 

 

참고

누구든지 하는 리액트 : 초심자를 위한 react핵심 강좌  (inflearn)

https://poiemaweb.com/es6-babel-webpack-1

https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d