[학습정리] Webpack,Babel

babel

https://babeljs.io/docs/en/

---

정의

• 공식문서에서는 babel을 다음과 같이 표현한다.

Babel is a Javascript compiler. Use next generation JavaScript

• 바벨은 최신 버전의 자바스크립트 문법(ES6+)을 이전 버전의 자바스크립트 문법으로 변환시켜주는 트랜스 컴파일러다.
• babel을 사용한다고 해서 모든 자바스크립트 최신 문법을 사용할 수 있는건 아니다.
• 기존에 문법에 없던 문법은 pollyfill 을 추가하여 지원하게 한다.

 pollyfill 자바스크립트의 최신기술을 구버전 브라우저에서 사용하기 위해서는 변화와 함께 폴리필도 사용해야 한다. 폴리필은 런타임 기능 주입을 말한다. 런타임 주입 기능은 브라우저에서 코드가 실행될 때 기능이 있는지 없는지 확인한 뒤 없을 경우에만 코드 변환을 하는 기능을 말한다.

• 왜 등장했는 지?
  • 최신 버전의 자바스크립트 문법을 지원하지 않는 브라우저 등에서 사용하기 위해 등장했다.
• 어디에 사용되는 지?
  • webpack과 함께 사용
• babel의 동작원리

Source Code ⇒ AST ⇒ modified AST ⇒ Source Code

1. 파싱 소스코드를 읽어서 파싱 후 추상구문트리(AST)를 생성한다. AST의 각 노드는 소스코드의 구조를 의미한다.
2. 변환 1단계에서 작성한 추상구문트리를 가져와서 각 브라우저에 맞게 변환한다. 여기서 바벨 설정에 추가한 plugin들이 적용된다.
3. 코드 생성 2단계에서 변형된 AST를 실제 브라우저 환경에 맞는 소스코드로 변환한다.

 

 

Webpack

https://webpack.js.org/

---

• 정의
  • Webpack은 모듈번들러다. 즉 여러개의 파일을 하나로 합쳐주는 도구이다.
• 왜 등장했는 지
  • 모듈 스코프 문제를 해결하고, 여러개의 파일을 한번에 합쳐서 관리하기 위해

 

 

 

Webpack을 사용하는 이유?

1. 모듈간의 의존성 문제를 해결

• Webpack이 모듈간의 의존성을 계산해서 번들링 해줌

2. 네트워크 병목을 줄여줌

• <script> 태그를 여러개 사용하여 웹 페이지를 로드하면 네트워크 병목현상이 생길 수 있다. 이런 문제를 해결하려면, 하나의 JS파일로 로드하면 되지만 하나의 JS파일로 개발할 경우 코드의 가독성이나 전역공간의 오염 같은 문제가 발생하게 된다. Webpack은 여러개의 파일을 하나로 묶어주기 때문에 이와 같은 문제를 해결할 수 있고 네트워크 병목현상을 최소화할 수 있다.

3. 모듈단위의 개발이 가능하다!

• 모듈단위의 개발이 가능하기 때문에, 코드의 가독성도 높이고 유지보수 효율도 높이고 스코프에 신경쓰지 않고 개발해도 된다. 또 라이브러리간 종속 문제를 고민할 필요가 없다. (Webpack이 entry point 부터 종속성을 계산하기 때문)

4.코드를 압축, 최적화할 수 있다.

• 하나의 파일로 압축시켜주고, plugin을 이용해서 최적화도 가능하다.

5. ES6+ 스크립트를 지원한다.

• webpack은 babel-loader를 사용하여 babel을 지원하기 때문에 컴파일 과정에서(코드를 번들링하는 과정에서) 구형 브라우저가 사용 가능한 문법으로 코드를 변환해 준다.

 

 

Webpack의 동작원리?

1. entry file의 의존성을 분석한다.
2. 다음 파일의 의존성을 분석한다.
3. 모든 파일의 의존성을 분석할 때 까지 2번 과정을 반복한다.
4. 3번 까지의 과정을 토대로 종속성 그래프를 만들고 이 그래프를 사용하여 모든 모듈을 하나(또는 여러개)의 bundle 파일로 합친다.
5.  

Concepts

• Mode

mode는 development, production, none이 있는데 development는 개발환경의 결과물을 만들때, 운영환경에서는 production을 사용한다.

module.exports = {
  mode: "development",
  ...

• Entry

entry는 최초 진입점이다. 시작점 경로를 지정하는 옵션이다. 기본값은 ./src/index.js 이고, 다르게 설정할 수 있다. (다중엔트리 포인트를 설정할 수도 있다.)

// webpack.config.js

module.exports = {
  entry: {
    main: "./path/to/my/entry/file.js",
  },
}

• Output

output은 번들링 결과물을 위치할 경로다. path.resolve()함수는 절대경로 주소를 얻어온다.[name]옵션은 entry에서 설정한 값을 포함한다. 주로 다중 엔트리 포인트를 만들때 쓴다.

const path = require("path")

module.exports = {
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
}

[name]옵션은 entry에서 설정한 값을 포함한다. 주로 다중 엔트리 포인트를 만들때 쓴다.

module.exports = {
  entry: {
    app: "./src/app.js",
    search: "./src/search.js",
  },
  output: {
    filename: "[name].js",
    path: __dirname + "/dist",
  },
}

• Loader

로더는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 것들을 변환할 수 있도록 도와준다. 파일을 다른 언어 (ex : TypeScript)에서 JavaScript로 변환하거나 인라인 이미지를 데이터 URL로 로드 할 수 있다. 또한 자바스크립트 모듈에서 직접 CSS파일을 import할 수 있다.

 

 

Webpack에서 Loader?

Webpack은 모든 파일을 모듈로 관리한다. Js 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다. 그러나, webpack은 js밖에 모른다. 비 js 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 이 역할을 담당한다.

로더는 test와 use키로 구성된 객체로 설정할 수 있다. test에 로딩할 파일을 지정하고, use 에 적용할 로더를 설정한다. 대표적인 로더는 babel-loader, css-loader , sass-loader 등이 있다.

Loader를 쓰는 이유

위의 app.js에서 style.css파일을 만들어 import하고 웹팩을 빌드하면 오류가 발생한다.

body {
  background-color: red;
}

import * as math from "./math.js"
import "./style.css"

console.log(math.sum(1, 2))

css모듈을 파싱하는 과정에서 오류 메세지가 나오고 적절한 로더를 사용해야 한다고 말해준다.

• Plugin

웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다.

// helloworld-plugin.js

class HelloWorldPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("Hello World Plugin", stats => {
      /* stats is passed as argument when done hook is tapped. */
      console.log("Hello World!")
    })
  }
}

module.exports = HelloWorldPlugin

그 다음 플러그인을 사용하려면 webpack.config.js의 plugins 배열에 생성자 함수로 생성한 객체 인스턴스를 포함한다.

const path = require("path");
const HelloWorldPlugin = require("./helloworld-plugin");

module.exports = {
  mode: "development",
  entry: {
      ...
  },
  output: {
      ...
  },
  module: {
      ...
  },
  plugins: [new HelloWorldPlugin()],
}

 

 

• 장점
  1. 빠른 로딩 속도와 높은 성능 웹팩으로 여러개의 자원을 하나의 파일로 병합하여 네트워크 요청을 줄인다.
  2. 웹 개발 작업 자동화 도구 (web task manager) html,css,js 압축, 이미지 압축, scss → css 전처리 변환과 같은 작업을 웹팩이 자동관리
  3. 파일 단위의 자바스크립트 묘듈 관리의 필요성 webpack을 쓰는 이유(모듈화의 역사)

webpack sourceMap

---

• sourceMap은 배보용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능
• 원본코드를 특정한 알고리즘으로 인코딩하여 특정 키워드로 맵핑을 시켜놓으면 나중에 브라우저에서는 난독화된 코드를 그대로 디코딩하여 복원시킬수 있다.
• Reference 7,8확인!
•  

ES module

---

https://ui.toast.com/weekly-pick/ko_20180402

Reference

---

1. https://babeljs.io/docs/en/ 바벨 공식홈페이지
2. https://webpack.js.org/ webpack 공식홈페이지
3. https://ingg.dev/webpack/ webpack을 쓰는 이유
4. https://codermun-log.tistory.com/605 TypeScript와 Webpack, Babel을 쓰는 이유
5. https://rrecoder.tistory.com/105 express와 webpack을 이용한 빌드환경 구성
6. https://github.com/doonguk/webpack-boilerplate babel,webpack 빌드환경 구성
7. https://joshua1988.github.io/webpack-guide/devtools/source-map.html#소스-맵 webpack handbook
8. https://velog.io/@seeker1207/SourceMap이란-무엇일까with-webPack-devtool sourceMap이란?