webpack

React를 사용할 때, CRA로 부르면 너무 잘 구성되어있는 webpack에 대한 이해가 부족하였는데
직접 바닐라 js에서 환경을 구축해보고, 웹팩에서 사용되는 용어를 정리하고자 작성하였습니다.

webpack이란?

최신 JavaScript 애플리케이션을 구축하고 있다면 "webpack"이라는 용어를 들어본 적이 있을 것입니다.

Webpack은 JavaScript 응용 프로그램을 위한 정적 모듈 번들러입니다. 응용 프로그램에서 모든 코드를 가져와 웹 브라우저에서 사용할 수 있도록 합니다. Webpack은 앱에서 코드가 어떻게 사용되는지에 따라 코드를 분리하며, 이러한 모듈식 책임 분류를 통해 코드를 훨씬 쉽게 관리, 디버그, 확인 및 테스트할 수 있습니다.

모듈 번들러란?

웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.

모듈 이란?

모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다.

webpack에서의 모듈이란, 웹사이트를 구성하는 모든 자원을 의미합니다. JavaScript, node_modules, Images, HTML 및 CSS 등 이러한 파일이 모두 모듈입니다.

웹팩이 필요한 이유

프로젝트 규모가 크다면, 코드도 길어지고, 관리하는 파일(모듈)이 많아지게 되고 관리하기에 어렵습니다.

많은 양의 파일을 브라우저에 로드하는데에는 그만큼 시간이 오래 걸리고, 특정 상황에 네트워크 비용이 발생할 수 있습니다.

webpack을 사용하기 전 과거에는 CommonJS나 AMD가 파일별로 모듈을 관리할 수 있었지만, webpack이 등장하게 되면서 AMD와 COMMON JS를 동시에 지원하고, 기본적으로 부분을 캐싱하여 변경점만 번들링 하는 방식이기 때문에, 속도가 빠르고 테스크 러너와의 연동도 훨씬 좋습니다.

 

자바스크립트 모듈을 구현하는 대표적인 명세가 AMD와 CommonJS 입니다.

 

CommonJS

자바스크립트를 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식이다. 대표적으로 서버 사이드 플래폼인 Node.js에서 이를 사용합니다.

 

AMD(Asynchronous Module Definition)

주로 브라우져 환경이고, 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표입니다.

 

UMD(Universal Module Definition)

AMD기반으로 CommonJS 방식까지 지원하는 통합 형태입니다.

 

 

출처: https://levelup.gitconnected.com/what-is-webpack-4fdb624597ae

https://velog.io/@qortmdalsdl/Webpack%EA%B3%BC-Babel-%EC%A0%95%EB%A6%AC

https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#%ED%8C%8C%EC%9D%BC-%EB%8B%A8%EC%9C%84%EC%9D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%EA%B4%80%EB%A6%AC

https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html#43-file-loader