• Webpack은 여러개의 파일을 하나로 합쳐주는 모듈 번들러입니다.
• 번들러를 사용하면 여러개 파일을 하나로 합쳐주기 때문에 네트워크 접속 부담을 줄여 더 빠른 서비스를 제공할 수 있습니다.
• 트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것입니다. 이를 해주는 것이 트랜스파일러입니다.

들어가기 전에

JavaScript는 원래 모듈을 지원하지 않았습니다. 하지만 개발자들의 노고 끝에 어떻게든 코드를 모듈화하고 서로 임포트하는 개념을 만들어 냈습니다. 이렇게 등장한 두 가지가 바로 CommonJs 모듈(node.js)과 Asynchronous Module Definition(Require JS)입니다.

아니 그렇다고 해도 모듈 개념이 없는 건 너무 하잖아요….하면서 JavaScript에 새로운 표준이 생겼습니다. 바로 ECMAScript6(ES6)입니다. ES6는 위의 두 가지의 특장점들을 가져와서 새로운 포맷을 만들어냈습니다.

• CommonJS처럼 간결한 문법을 갖추어 싱글 export와 순환 의존성을 지원
• AMD처럼 바로 비동기 로딩과 (설정가능한) 모듈 로딩을 지원

이것들과 더해 언어 자체가 모듈을 지원하며 장점도 추가되었습니다.

• CommonJS보다 문법이 더 간결
• 구조가 static하게 분석 가능하고, 최적화 가능
• CommonJS보다 순환 의존성 지원이 잘됨

하지만 브러우저는 여전히 파일 단위 모듈을 잘 모릅니다.

ES6는 일부 브라우저에서만 지원합니다.(크롬, 사파리) 여러 버전의 각기 다른 브라우저는 이런 모듈화를 지원하지 않는 경우도 있습니다. 하나의 소스로 모든 브라우저에서 보여주는 것이 웹의 특장점입니다. 그래서 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 할 수 있어야 합니다. 이 과정을 번들링이라고 합니다. 그리고 이런 번들링해주는 툴을 번들러라고 합니다.

Webpack

Webpack은 여러개 파일을 하나로 합쳐주는 모듈 번들러입니다.

웹팩은 기본적으로 모듈을 지원하고 파일 분할 기능(원하는 코드만 따로 분리해서 하나의 파일로 압축 가능), CSS loader 기능, jsx 변환 작업도 해줍니다.

여러개로 나눠진 JavaScript 파일을 HTML이 실행할 수 있는 하나의 JavaScript 파일로 합쳐줍니다.