내가 레퍼런스가 되자 내가 레퍼런스가 되자

Webpack을 사용할 때 이전에 미리 Webpack과 함께 Babel, 각종 loader들을 설정하여 만들어둔 package를 가져와 사용하고 현재는 Vite를 사용하다 보니 Webpack을 직접 다룬지 오래되어 리프레시 겸 다시 찾아보게 되었습니다. 지난번 Babel 포스팅처럼 간단히 정리하려고 합니다. Webpack? Webpack은 여러 개의 JavaScript module을 하나(또는 여러개)의 파일로 만드는 bundler입니다. 클라이언트 개발에서 module의 개념이 등장한 이후 bundler의 존재도 뗄 수가 없으며 이제는 필수가 되었습니다. 그중 Webpack은 많은 개발자로부터 선택받은 bundler입니다. Webpack Config Webpack의 config 설정을 위해 루트 디렉토..

이전에 작업했던 프로젝트의 유지보수를 위해 오랜만에 해당 프로젝트의 개발 서버를 올렸는데 꽤나 많은 시간이 걸렸습니다. 소스 코드를 수정했을 때도 리빌드 시간이 매우 많이 걸렸습니다. 현재 작업 중인 프로젝트에선 Vite를 도입하여 사용 중이다 보니 체감상 더 크게 느끼게 되었습니다. 이전의 프로젝트들에서 사용했던 Webpack, Rollup과 달리 개발 서버 구동 시 많은 시간을 줄이게 해 준 Vite가 무엇인지 살펴보겠습니다. Unbundled Development 브라우저에서 ESM(ES Modules)을 사용하지 못하던 시절 JavaScript의 native 방식의 모듈 관리를 할 수 없었습니다. 그래서 번들링을 하여 모듈화 된 소스 코드를 합쳐 브라우저에서 동작할 수 있게 했습니다. 하지만 애플..