javascript - webpack의 모듈 패키징 아이디어를 잘 이해하지 못하시나요?

Question

공식 webpack 문서를 통해 webpack을 배우고 있습니다.
처음에는 webpack이 모든 리소스를 모듈로 처리해서 번들로 패키징했습니다. 그것은 꽤 좋고 매우 매력적으로 보입니다.

그런데 나중에 보니 포장의 개념이 헷갈리더군요.

코드 분리를 보면 브라우저의 병렬 로딩 및 캐싱 메커니즘을 최대한 활용하려면 CSS와 타사 라이브러리 파일을 별도로 번들로 패키징해야 한다고 나와 있습니다.

리소스를 소개하는 기존의 태그 사용이 js에서 로딩을 표시하기 위한 요구 사용으로 변경된 결과가 아닌가요?
그럼 종속성을 명시적으로 선언하는 것 외에 모듈 패키징의 장점은 무엇인가요?

코드가 분리된 곳을 보니 코드를 분리해야 하는데 왜 모듈을 패키징해야 하는 걸까?

이 모듈을 패키징하면 어떤 이점이 있나요?

Answer 1

예를 들어 거기서 CSS를 분리합니다. 먼저 CSS를 도입하도록 요구한 다음 플러그인을 사용하여 별도로 번들로 패키지한 다음 태그를 사용하여 HTML에 도입해야 합니다.

왜 굳이 포장하느라 고생해야 하나요? 평소처럼 HTML에서 태그를 사용하는 것이 더 낫지 않을까요?

Answer 2

모듈화는 코드 작성의 편의를 위한 것이고, 패키징은 코드 실행의 편의를 위한 것입니다

그리고 웹팩은 따로 포장도 가능해요

Answer 3

SPA를 사용하거나 scss, postcss, 이미지 압축, 자동 이미지 base64 변환을 사용하지 않는 경우 CSS 또는 JS를 수동으로 삽입하는 것은 실제로 큰 문제가 아닙니다. Vue 다중 페이지 프로젝트를 작업할 때 js 또는 css를 html에 자동으로 삽입하는 편리함을 느낄 수 있습니다.

예전에는 수동링크로 CSS를 소개할 때 편의상 모든 CSS 내용을 같은 파일에 넣거나, 그렇지 않으면 링크를 추가해야 했는데, 모든 CSS를 하나의 파일로 개발하는 것은 불편합니다. 웹팩을 좀 하고 나면 CSS 파일을 최대한 분할해서 파일 구조가 깔끔해 질 거예요

CSS에 대한 Webpack의 이점은 현재 제가 생각할 수 있는 전부입니다