Webpack과 Babel

강종연·2021년 5월 25일

babel webpack 모듈번들러 트랜스파일러

FrontEnd

목록 보기

3/6

번들화가 왜 중요한가

사실 공부하면서 Webpack란 단어는 많이 접했지만 왜 써야하는지 어떤 상황에서 써야 잘 썼다고 할 수 있는지 감조차 잡히지 않았다. 그래서 아예 며칠 날잡고 Webpack에 대해 파보기 시작하였다.

Webpack의 등장

(옛날에 작업했던 부트스트랩을 이용한 작업들 중 한 페이지)

사실 부트스트랩이나 옛날 코드들을 뜯어보면 위 사진처럼 script로 js파일들을 불러오는 코드들이 많은 것을 볼 수 있다. 이렇게 자바스크립트 파일을 하나하나 불러오는 것은 코드가 너무 길이보이고 지저분해 보이지 않나..! 이것조차 줄이고싶은 개발자의 욕구로 인해 탄생한 것이 Webpack이다.

Webpack이란?

그럼 Webpack은 무엇일까

최근 프론트엔드 개발에서 가장 많이 사용된는 모듈 번들러(Module Bundler)이다.

모듈이란?

모듈은 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 어쩌면 파일단위, 또 어쩌면 작은 코드단위도 해당될 수 있다.

모듈 번들링이란?

위에서 설명했던 모듈들을 하나의 파일로 묶어주는 동작을 모듈 번들링이라고 한다.

결론적으로 하나의 웹개발에 쓰이는 모든 자원들을 하나의 파일로 병합 및 압축해주는 역할을 하는 것이 최근에 가장 자주 쓰이는 모듈 번들러, 즉 Webpack이다.

웹팩의 4가지 속성

웹팩은 여러가지 속성들을 가지고 있지만 그 중에서 필수적으로 알고가야할 4가지 속성들을 배워보고자 한다.

Entry

entry란 다양한 모듈을 변환하기 위해 가장 먼저 탐색할 자바스크립트 파일 경로를 의미한다.

module.exports = {
    entry: './src/index.js`
}

위 코드는 가장 먼저 탐색할 자바스크립트 파일을 index.js로 잡은 것이다.
여기서 주의할 점은 entry에 들어갈 자바스크립트 파일안에는 웹 어플리케이션의 전반적인 구조와 내용이 담겨져야 한다는 것이다. 한 프로젝트내에서 사용하는 js파일을 다 포함하는 최상단 파일이어야 한다.

Entry 포인트는 단 한개여야 하는가?
그럼 이런 의문이 들 수 있다. 최상단 파일이면 무조건 한개여야 하지않냐...
그렇게 생각을 할 수 있지만 여러 개일수도 있다. 이렇게 될 경우는 SPA(Single Page Application)가 아니고 멀티 페이지를 만들 때이다.
그러나 SPA를 추구하는 애플리케이션이 많기때문에 보통은 한 개이다.

Output

output속성은 웹팩을 거치고 난 후의 파일을 저장할 경로나 이름등을 지정한다.

const path = require("path");

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

Loader

loader속성은 js파일이 아닌 다른 웹 어플리케이션 조각(html, css, ts, scss...)들을 변환할 수 있도록 도와주는 역할을 한다.

module.exports = {
  module: {
    rules: [],
  },
};

사용 방식은 rules 배열 안에 각 파일애 대한 규칙들을 객체화하여 옵션을 추가하면 된다.

//예시
rules: [{ test: /\.html$/, use: "html-loader" }];

test는 적용할 파일의 확장자명을 나타내고 use는 파일에 적용할 loader이름을 나타낸다.
use로 파일에 적용할 loader가 다양할 경우 use는 적은 마지막 로더부터 적용이 된다.(오른쪽에서 왼쪽 순서로 적용)

Plugin

Plugin속성은 웹팩이 돌아가는 기능 외에 다른 추가할 기능들을 제공하는 역할을 한다.

module.exports = {
  plugins: [],
};

플러그인 배열 안에는 추가할 기능들을 가지고 있는 객체가 들어갈 수 있다.

Babel

Webpack을 공부하다보면 빠짐없이 나오는게 이 Babel이다.

Babel is JavaScript compiler.

공식사이트에선 이렇게 설명하고 있다. Babel===자바스크립트 컴파일러(즉, 트랜스파일러)

프론트엔드 쪽이 계속 발전하면서 웹 환경도 변화했다. 이처럼 브라우저의 버전에 따라, 또 자바스크립트의 버전에 따라 등등 각각의 버전에 따라 적절하게 이루어지지 않으면 많은 문제들이 발생한다.

이를 해결하기위해, 모든 브라우저에서 문제 없이 작동하기 위해 Babel을 사용한다.

Babel은 트랜스파일러의 역할을 하기 위해 3가지 기능+a 을 제공한다.

자바스크립트 등등의 문법 변환
현재 버전에 없는 기능 구현(Polyfill)
소스 코드 변환
+a

글을 마무리하며

오늘은 webpack의 전반적인 내용에 대해서 그리고 Babel에 대해서 간략히 알아보았다. 글을 쓰면서 내가 만들었던 리액트의 프로젝트를 다시 봤는데 내가 구조를 모르고 진행을 다 했었구나라는 생각이 든다.모를 때가 용감하다 하지만 이거는 모르면 중간의 진행상황 중 크게 구멍이 나기 때문에 이게 맞나 싶었다...

앞으로도 내가 진행했던 개발 중 모르는 부분이 백프로 있을거기 때문에 좀 더 다시 되돌아봐야겠다.