안녕하세요! 웹팩은 웹페이지 "번들러" 이에요. 번들러라고 하면 조금 생소할 수 있으니, 코드를 패키징해주는 도구 그래서 웹팩 이라고 외워보면 어떨까요? (제가 처음에 이렇게 외웠습니다 하하..)

안녕하세요! 웹팩은 웹페이지 "번들러" 이에요. 번들러라고 하면 조금 생소할 수 있으니, 코드를 패키징해주는 도구 그래서 웹팩 이라고 외워보면 어떨까요? (제가 처음에 이렇게 외웠습니다 하하..) 패키징, 즉 하나로 묶어준다. 인데요 그럼 왜 하나로 묶는게 필요할까요? 이전에 ESModule 시스템이 나오기 전에는 html, css, javascript로 웹 코딩을 할 때는 HTML 파일에 태그로 작성한 자바스크립트 파일들을 하나씩 모두 불러왔어야 했어요. ```html ... ... ``` 위와 같은 코드의 형식으로요. 근데 ES6에 도입된 모듈시스템과 번들러 도구인 웹팩 덕에 시작 파일(entry)을 타고 들어가 서로 어느 자바스크립트를 의존하는지 파악하고 분석해서 하나의 파일로 만들어서 단 하나의 javascript 파일만 불러오면 흩어져 있는 모든 js 파일을 script 태그로 불러오지 않아도 코딩을 할 수 있게 됐죠. ```html ... ... ``` 또한 웹팩에는 특정 파일들에 대한 처리를 따로 해줄 수 있는 Loader의 개념, 그리고 코드를 minify(쓸모없는 줄, 콘솔로그지우기 등등)을 제공해줘 번들 사이즈를 줄인다던가, 특정 환경(development, production)에서 동작하는 다른 코드를 따로 생성해준다던가 하는 기능들을 제공해주는 Plugin 시스템 등등 제가 말을해도 공식문서보다는 정확하지 않으니 https://webpack.js.org/ 공식문서를 참고하시면 더욱 더 많은 내용들을 알게되실거에요. 그래서 웹팩이 필수라는 질문을 돌려말하면 "번들러가 필수냐"로도 말할 수 있겠네요. 번들러가 필수냐고 한다면 최신 프레임워크에서는 알게 모르게 다들 쓰고 계실거에요. 그게 webpack이 될수도 있고, parcel, rollup과 같은 도구들이 있었다면 최근에는 esbuild와 같은 javascript가 아닌 다른 빠른 언어 (rust나 go를 써서)로 만들어진 도구들이 많이 쓰이고 있는 추세죠. 그래서 안쓰고 싶어도 안쓸수가 없을거에요. CRA는 webpack, Next는 최근 13버전에서 자체적으로 Rust로 개발한 Turbopack을 사용하고, Vite는 esbuild, Gatsby는 아직 webpack을 사용하고 있죠. 프레임워크를 사용하지 않고 자체적으로 javascript를 이용해서 개발을 한다고 해도 bundler의 욕구는 끊이질 않을거에요. 제가 얘기한 것들이 생략된 부분들이 조금 많아서 javascript module system, bundler 그리고 세트로 같이 묶여다니는 트랜스파일러 도구들 (babel, swc, ...) 들의 개념들도 같이 찾아보면 좋을 것 같아요. 감사합니다