웹팩은 CSS 파일을 어떻게 번들링 할까?

자바스크립트 파일 내부에 같이 번들링하기
- css-loader 를 사용해서 css 파일을 자바스크립트 모듈로 변환하여, style-loader 를 통해 HTML 파일에 style 태그로 추가한다.
번들링 후, CSS 파일을 별도로 추출하기
- mini-css-extract-plugin 과 같은 플러그인을 사용하여, CSS 를 별도의 파일로 추출하여 번들링 된 JS 파일과 분리시킨다.
- CSS 파일이 별도의 파일로 추출되어 link 태그로 html 파일에 삽입된다.
- 이렇게 함으로써, JS 파일과 CSS 파일이 서로 독립적으로 캐싱될 수 있어서 더 작은 단위로 업데이트 및 다운로드 가능.
- 코드 분리. 따라서, 번들링 크기가 커지지 않음.

개발 환경에서는 주로 style-loader를 사용하여 빠르게 스타일을 적용하고 수정할 수 있게끔 하며, 프로덕션 환경에서는 mini-css-extract-plugin을 사용하여 최적화된 형태로 배포할 수 있도록 하는 것이 일반적인 패턴