Plugins
Webpack에는 많은 플러그인 인터페이스가 있습니다. Webpack 자체에 있는 대부분의 기능은 플러그인 인터페이스를 사용합니다. 이런점이 webpack을 유연하게 만듭니다.
아래 플러그인들은 기능별로 분류되어 있습니다. 대부분은 webpack에 포함되어 있어 new webpack.SomePlugin()으로 사용할 수 있으며, *-webpack-plugin 이름의 페이지에 있는 것들은 별도로 설치가 필요한 패키지입니다.
Sources and modules
| 이름 | 설명 |
|---|---|
DefinePlugin | 컴파일 시점에 설정되는 전역 상수를 사용할 수 있게 합니다 |
EnvironmentPlugin | process.env 키에 DefinePlugin을 사용하는 shorthand입니다 |
ProvidePlugin | import 또는 require 없이 모듈을 사용할 수 있게 합니다 |
IgnorePlugin | 번들에서 특정 모듈을 제외합니다 |
NormalModuleReplacementPlugin | 정규식과 일치하는 리소스를 교체합니다 |
ContextReplacementPlugin | require 표현식에서 추론된 컨텍스트를 재정의합니다 |
ContextExclusionPlugin | 일치하는 컨텍스트를 제외하여 webpack이 해당 모듈을 생성하지 않도록 합니다 |
VirtualUrlPlugin | 디스크에 파일 없이 빌드 시점에 콘텐츠가 생성되는 모듈을 만듭니다 |
Output and assets
| 이름 | 설명 |
|---|---|
BannerPlugin | 생성된 각 청크 상단에 banner를 추가합니다 |
CopyPlugin | 파일과 디렉터리를 출력 디렉터리로 복사합니다 |
ManifestPlugin | 소스 파일명을 방출된 출력 파일로 매핑하는 애셋 매니페스트를 생성합니다 |
ChunksWebpackPlugin | 번들 제공을 위해 엔트리 포인트와 청크 관계가 포함된 HTML 파일을 생성합니다 |
SvgChunkWebpackPlugin | 엔트리 포인트 디펜던시를 기반으로 SVGO가 최적화한 SVG 스프라이트를 생성합니다 |
Chunks and optimization
| 이름 | 설명 |
|---|---|
SplitChunksPlugin | 공유 코드와 vendor 코드를 별도 청크로 분리합니다 — optimization.splitChunks를 통해 설정합니다 |
ModuleConcatenationPlugin | 스코프 호이스팅 — production 모드에서 optimization.concatenateModules를 통해 기본적으로 활성화됩니다 |
MergeDuplicateChunksPlugin | 동일한 모듈을 포함하는 청크를 병합합니다 |
LimitChunkCountPlugin | 청크를 병합하여 최대 청크 수를 제한합니다 |
MinChunkSizePlugin | 청크 크기를 지정한 제한 이상으로 유지합니다 |
MinimizerPlugin | 프로젝트의 JS/CSS/HTML/JSON 등을 minify하고, 방출 결과를 압축합니다 |
HashedModuleIdsPlugin | 해시 기반 모듈 ID — production 기본값인 optimization.moduleIds: 'deterministic'을 대신 사용하세요 |
NoEmitOnErrorsPlugin | 컴파일 오류가 있을 때 emit 단계를 건너뜁니다 |
AutomaticPrefetchPlugin | 이전 컴파일의 모든 모듈을 미리 해결하여 워치 재빌드 속도를 높입니다 |
PrefetchPlugin | 첫 번째 import 전에 모듈을 미리 해결하고 빌드하여 크리티컬 빌드 경로를 단축합니다 |
DllPlugin | 번들을 사전 빌드된 vendor 번들로 분리합니다 — 파일시스템 캐시로 대부분 대체되었습니다 |
Module Federation
| 이름 | 설명 |
|---|---|
ModuleFederationPlugin | 런타임에 독립적으로 빌드된 애플리케이션 간에 모듈을 공유합니다 |
Development and diagnostics
| 이름 | 설명 |
|---|---|
HotModuleReplacementPlugin | Hot Module Replacement (HMR)를 활성화합니다 |
SourceMapDevToolPlugin | 소스맵을 더 세밀하게 제어할 수 있게 합니다 |
EvalSourceMapDevToolPlugin | eval 소스맵을 더 세밀하게 제어할 수 있게 합니다 |
ProgressPlugin | 컴파일 진행 상황을 보고합니다 |
ProfilingPlugin | 플러그인 실행 타이밍을 Chrome 프로파일 파일에 기록합니다 |
WatchIgnorePlugin | 워치 모드에서 일치하는 경로를 무시하여 재빌드가 발생하지 않게 합니다 |
DiagnosticsWebpackPlugin | 빌드 중 소스에 linter 및 기타 진단 도구를 실행합니다 |
더 많은 써드 파티 플러그인을 찾고 싶다면, awesome-webpack을 참고하세요.
Next »
ChunksWebpackPlugin