Webpack 내부적으로 사용하는 플러그인의 목록입니다.
내부 플러그인의 범주:
컴파일러의 환경에 영향을 주는 플러그인입니다.
webpack.node.NodeEnvironmentPlugin()
컴파일러에 Node.js 스타일의 파일 시스템을 적용합니다.
컴파일러에 영향을 주는 플러그인입니다.
MemoryCachePlugin()
모듈이 메모리에 캐시되는 컴파일러에 캐시를 추가합니다.
ProgressPlugin(handler)
컴파일러에 훅을 하여 진행 정보를 추출합니다. handler
는 function(percentage, message)
라는 서명이 있어야 합니다. Percentage는 0과 1 사이의 값으로 불립니다. 0은 시작, 1은 끝을 나타냅니다.
RecordIdsPlugin()
레코드로부터 청크 아이디와 모듈을 저장하고 복원합니다.
컴파일에 엔트리 청크를 포함하는 플러그인입니다.
EntryPlugin(context, entry, options)
컴파일에 엔트리 청크를 추가합니다. 청크의 이름은 options.name
이고 오직 하나의 모듈만 포함합니다(의존성 추가). 모듈은 context
(절대 경로)의 entry
에서 확인됩니다.
PrefetchPlugin(context, request)
병렬 컴파일을 더 사용하기 위해서 의존성과 request
를 프리페치합니다. 어떤 청크도 생성되지 않습니다. 모듈은 context
(절대 경로)의 request
에서 확인됩니다.
JsonpTemplatePlugin(options)
청크는 JSONP-calls로 래핑되어 있습니다. 로딩 알고리즘은 엔트리 청크에 포함이 됩니다. <script>
태그를 추가함으로써 청크를 로드합니다.
options
는 출력 옵션입니다.
options.jsonpFunction
은 JSONP 함수입니다.
options.publicPath
는 청크를 로딩하기 위한 경로로 사용됩니다.
options.chunkFilename
는 청크가 예상되는 파일 이름 이름입니다.
node/NodeTemplatePlugin(options)
청크는 번들 모듈을 내보내는 Node.js 모듈로 래핑되어 있습니다. 엔트리 청크는 청크를 요구함으로써 로드됩니다.
options
는 출력 옵션입니다.
options.chunkFilename
는 청크를 로딩하기 위한 경로로 사용됩니다.
LibraryTemplatePlugin(name, target)
엔트리 청크들은 type
유형의 name
라이브러리로부터 꾸며집니다.
webworker/WebWorkerTemplatePlugin(options)
청크는 importScripts
에 의해 로드됩니다. 그렇지 않다면 JsonpTemplatePlugin
과 비슷합니다.
options
은 출력 옵션입니다.
// @sourceURL
로 주석이 달린 eval
로 각각의 모듈을 래핑함으로써 모듈 템플릿을 꾸밉니다.
SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)
각 청크에 대한 소스맵을 생성함으로써 템플릿들을 꾸밉니다.
sourceMapFilename
은 소스맵의 파일 이름 템플릿입니다. [hash]
, [name]
, [id]
, [file]
과 [filebase]
는 교체되었습니다. 만약에 인자가 없으면, 소스맵은 DataUrl로 인라인 될 것입니다.
HotModuleReplacementPlugin(options)
Hot module replacement 대한 지원을 추가합니다. 런타임 코드를 추가한 템플릿을 꾸밉니다. `module.hot' API를 추가합니다.
options.hotUpdateChunkFilename
은 hot 업데이트 청크 파일 이름입니다.
options.hotUpdateMainFilename
은 hot 업데이트 매니페스트 파일 이름입니다.
options.hotUpdateFunction
는 hot 업데이트의 JSON 함수 이름입니다.
모듈의 소스 코드에 영향을 미치는 플러그인입니다.
webpack_public_path, webpack_require, webpack_modules 과 webpack_chunk_load에 접근할 수 있도록 설정합니다. require.valueOf
와 require.onError
가 다른 플러그인으로 처리되지 않도록 합니다.
현재는 쓸모가 없습니다. 다른 모듈 로더과의 호환성을 보장합니다.
파서에 의해 발사된 훅을 사용함으로써 dead branch를 추가로 제거를 가능하게 하려고 if (...)
문과 삼항 연산자를 평가하여 true/false
로 바꾸려고 시도합니다.
프로덕션 모드에는 dead branch와 관련하여 여러 최적화 들이 있습니다.
Webpack은 조건문을 평가하려고 할 것입니다. 만약 성공한다면 dead branch가 제거됩니다. Webpck은 컴파일러가 알지 못하는 한 상수 폴딩을 할 수 없습니다. 다음 예시를 봅시다.
import { calculateTax } from './tax';
const FOO = 1;
if (FOO === 0) {
// dead branch
calculateTax();
}
위의 예시에서, webpack은 branch를 자를 수 없지만, Terser는 할 수 있습니다. 그러나 만약 FOO
가 DefinePlugin 을 사용하면, webpack은 성공할 것입니다.
import { calculateTax } from './tax';
도 제거된다는 점을 언급해야 합니다. 왜냐하면 calculateTax()
호출이 dead branch에 있어 제거되었기 때문입니다.
ProvidePlugin(name, request)
만약에 모듈에서 name
이 사용되는 경우는 require(<request>)
에 의해 로드된 모듈에 의해서 채워집니다.
NodeStuffPlugin(options, context)
Node.js 모듈에서는 일반적으로 사용할 수 있는 항목을 제공합니다.
또한, module
을 사용하는 경우에는 일부의 Node.js 항목으로 채워지도록 합니다.
require.js에서는 일반적으로 사용할 수 있는 항목을 제공합니다.
require[js].config
는 제거됩니다. require.version
은 0.0.0
입니다. requirejs.onError
는 require.onError
에 매핑이 됩니다.
node/NodeSourcePlugin(options)
이 모듈은 Node.js 환경이 아니면 사용할 수 없는 Node.js의 내용을 추가합니다.
사용되는 경우에는 process
, console
, Buffer
와 glo
에 대한 polyfills을 추가해야 합니다.
node/NodeTargetPlugin()
만약 Node.js 환경에서 번들을 실행하는 경우에는 플러그인을 사용해야 합니다.
만약 네이티브 모듈이 번들 되어있더라도 올바르게 로드되도록 보장합니다.
dependencies/AMDPlugin(options)
AMD 스타일의 define
과 require
모듈을 제공합니다. 또한, require.amd
, define.amd
와 webpack_amd_options## 를 파라미터로 전달된 options
에 바인딩합니다.
dependencies/CommonJsPlugin
CommonJs 스타일의 require
모듈을 제공합니다.
dependencies/RequireContextPlugin(modulesDirectories, extensions)
require.content
를 제공합니다. modulesDirectories
와 extensions
파라미터는 파일에 대한 요청을 대체할 수 있는 것을 찾는 데 사용됩니다. 리졸버에 제공하는 것과 동일한 배열을 제공하는 것이 유용합니다.
dependencies/RequireEnsurePlugin()
require.ensure
를 제공합니다.
dependencies/RequireIncludePlugin()
require.include
를 제공합니다.
DefinePlugin(definitions)
식별자에 대해 상수를 정의합니다.
definitions
은 객체입니다.
webpack.optimize
네임스페이스 아래의 모든 플러그인은 mode
가 'none'
으로 설정된 경우에만 사용해야 합니다. 그렇지 않다면 플러그인은 두 번 적용되어야 합니다.
optimize/LimitChunkCountPlugin(options)
병합 청크의 제한된 청크 수는 `options.maxChunks'보다 작습니다.
각 청크에 대한 오버헤드는 options.chunkOverhead
또는 기본값인 10000에 의해 제공됩니다. 엔트리 청크의 크기는 options.entryChunkMultiplicator
(또는 10)에 의해 곱해집니다.
전체적인 크기를 가장 많이 줄인 청크가 첫 번째로 병합됩니다. 만약 여러 조합이 같으면 병합된 크기가 작은 것이 선택됩니다.
optimize/MergeDuplicateChunksPlugin()
같은 모듈의 청크가 병합됩니다.
optimize/RemoveEmptyChunksPlugin()
모든 부모 청크에 포함된 모듈은 청크로부터 제거됩니다.
optimize/MinChunkSizePlugin(minChunkSize)
-
각 청크의 최소 크기가 minChunkSize
가 될 때까지 청크를 병합합니다.
ModuleConcatenationPlugin page에 대한 구체적인 내용을 확인해보세요.
optimize/FlagIncludedChunksPlugin()
청크에 포함된 청크의 청크 아이디를 추가합니다. 불필요한 청크 로드를 제거할 수 있습니다.
optimize/RealContentHashPlugin()
optimization.realContentHash
옵션이 활성화 될 때, webpack은 내부적으로 RealContentHashPlugin
을 컴파일러에 추가합니다.
RealContentHashPlugin
은 해시 업데이트를 커스터마이징할 수 있는 훅인 updateHash
5.8.0+를 제공합니다.
const webpack = require('webpack');
const RealContentHashPlugin = webpack.optimize.RealContentHashPlugin;
// ...
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
const hooks = RealContentHashPlugin.getCompilationHooks(compilation);
hooks.updateHash.tap('MyPlugin', (content, oldHash) => {
// 이곳에서 원하는데로 해시를 계산할 수 있습니다.
});
});