Webpack 및 Babel 이란?

1. Webpack 이란?

Webpack이란 HTML 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 Module Bundling (모듈 번들링) 이다.

2. Webpack을 왜 써야할까?

옛날에는 페이지마다 새로운 HTML을 요청해서 뿌려 주는 방식이였다면 (SSR), 요새는 SPA 방식을 많이 채택한다 (CSR). SPA는 하나의 HTML 페이지에 여러개의 자바스크립트 파일들이 포함된다. Webpack은 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.

Webpack은 난무하는 <script> 태그를 하나의 파일로 묶어주는 도구이다.

3. Webpack의 기본구조

// 파일명 = wepback.config.js 를 루트 디렉토리에 만든다.

module.exports={
    entry : './src/test.js',
    output: {
        filename : 'bundle.js',
        path : path.resolve(__dirname + '/build')
    },
    mode : 'none'
}

• entry : build의 대상이 될 파일의 경로
• output : build 결과물을 저장할 경로
• path : 파일의 경로를 다루고 변경하는 유틸리티
• Plug-In : build 된 bundle 파일을 동적으로 특정 html 페이지에 추가 할 수 있으며 build 시에 javscript, css, html 등의 파일을 난독화 및 압축을 진행할 수 있다.

Webpack은 오직 Javascript와 Json만 이해할 수 있는 단점이 있다.
Loader는 다른 Type의 파일을 Webpack이 이해하고 처리가능한 모듈로 변환시키는 작업을 담당한다.

var path = require('path');

module.exports = {
   entry : './src/test.js',
    output: {
        filename : 'bundle.js',
        path : path.resolve(__dirname + '/build')
    },
    mode : 'none',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

4. Babel 이란?

ES6 문법을 ES5로 트랜스파일 해주는 도구이다.

👉 트랜스파일 : 한 언어로 작성된 소스코드를 비슷한 수준의 언어로 변환하는 것 (EX. TypeScript => JavaScript)

5. Babel을 사용해야하는 이유?

최신 업데이트 중에 ES6버전은 큰 업데이트 부분을 차지한다.
크게 일어난 만큼 ES6를 지원해주는 브라우저가 있다. 그 중에서는 지금까지는 크롬, 사파이, 파이어폭스(98%)와 같은 에버그린 브라우저는 최신 업데이트 버전으로 지원을 해준다.
하지만 인터넷 익스플로러11을 사용하는 비율도 11% 정도나 되는데 지원을 하지 않는다. 그러므로 아직 구 버전을 사용하는 ES5버전으로 바꿔주어야 한다.
그래서 개발환경을 설정할 때, webpack이랑 babel로 기초 환경 설정을 잡고 개발을 해야 한다.