Webpack - 웹팩 Modules (7)

지난 포스트에 이어서 웹팩의 모듈에 대해서 알아보도록 하겠습니다.

Modules

모듈형 프로그램밍에서 개발자는 프로그램을 모듈이라는 기능의 개별 청크로 나눕니다.

각 모듈은 전체 프로그램보다 표면적이 적기 때문에 검증, 디버깅 및 테스트가 간단합니다. 잘 작성된 모듈은 견고한 추상화와 캡슐화 경계를 제공하므로 각 모듈은 전체 애플리케이션 내에서 일관된 디자인과 명확한 목적을 갖습니다.

Node.js는 처음부터 거의 모듈식 프로그래밍을 지원했습니다. 그러나 웹에서는 모듈에 대한 지원이 느리게 도착했습니다. 웹에서 모듈식 javascript를 지원하는 여러 도구가 존재하며 다양한 이점과 제한이 있습니다. 웹팩은 이러한 시스템에서 배운 교훈을 기반으로하여 프로젝트의 모든 파일에 모듈 개념을 적용합니다.

웹팩 모듈이란 무엇인가?

Node.js 모듈과 달리 웹팩 모듈은 다양한 방식으로 종속서을 표헌할 수 있습니다. 몇 가지 예는 다음과 같습니다.

• ES2015 import statement
• CommonJS require() statement
• AMD define and require statement
• @import statement inside of a css/sass/less 파일

스타일시트 url(…) 또는 html <img src=“…”> 파일 이미지 URL

지원되는 모듈 유형

웹팩은 로더를 통해 다양한 언어와 전처리기로 작성된 모듈을 지원합니다. 로더는 javascript가 아닌 모듈을 처리하는 방법을 웹팩에 설명하고 이러한 종속성을 번들에 포함합니다. 웹팩 커뮤니티는 다음을 포함하여 널리 사용되는 다양한 언어 및 언어 프로세서용 로더를 구축했습니다.

• CoffeeScript
• TypeScript
• ESNext (Babel)
• Sass
• Less
• Stylus
• Elm

그리고 다른 많은 것들! 전체적으로 웹팩은 사용자 지정에 강력하고 풍부한 API를 제공하여 개발, 테스트 및 프로덕션 워크플로우에 대해 주의를 기울이지 않고 모든 스택에 웹 팩을 사용할 수 있도록 합니다.

전체 목록은 로더 목록을 참조하거나 직접 작성하십시오.