[go: up one dir, main page]
webpack logo

Internal webpack plugins

Webpack 내부적으로 사용하는 플러그인의 목록입니다.

내부 플러그인의 범주:

environment

컴파일러의 환경에 영향을 주는 플러그인입니다.

NodeEnvironmentPlugin

webpack.node.NodeEnvironmentPlugin()

컴파일러에 Node.js 스타일의 파일 시스템을 적용합니다.

compiler

컴파일러에 영향을 주는 플러그인입니다.

MemoryCachePlugin

MemoryCachePlugin()

모듈이 메모리에 캐시되는 컴파일러에 캐시를 추가합니다.

ProgressPlugin

ProgressPlugin(handler)

컴파일러에 훅을 하여 진행 정보를 추출합니다. handler는 (percentage: number, message: string) => void 서명이 있어야 합니다. Percentage는 0과 1 사이의 값으로 호출됩니다. 0은 시작, 1은 끝을 나타냅니다.

RecordIdsPlugin

RecordIdsPlugin()

레코드로부터 청크 아이디와 모듈을 저장하고 복원합니다.

entry

컴파일에 엔트리 청크를 포함하는 플러그인입니다.

EntryPlugin

EntryPlugin(context, entry, options)

컴파일에 엔트리 청크를 추가합니다. 청크의 이름은 options.name이고 오직 하나의 모듈만 포함합니다(의존성 추가). 모듈은 context (절대 경로)의 entry에서 확인됩니다.

PrefetchPlugin

PrefetchPlugin(context, request)

병렬 컴파일을 더 사용하기 위해서 의존성과 request를 프리페치합니다. 어떤 청크도 생성되지 않습니다. 모듈은 context (절대 경로)의 request에서 확인됩니다.

output

JsonpTemplatePlugin

web/JsonpTemplatePlugin()

청크는 JSONP-calls로 래핑되어 있습니다. 로딩 알고리즘은 엔트리 청크에 포함이 됩니다. <script> 태그를 추가함으로써 청크를 로드합니다.

옵션이 없으며 output.chunkLoading을 'jsonp'로 설정합니다. 출력 옵션을 통해 설정됩니다.

output.chunkLoadingGlobal이 JSONP 함수입니다.

output.publicPath는 청크를 로딩하기 위한 경로로 사용됩니다.

output.chunkFilename은 청크가 예상되는 파일 이름입니다.

NodeTemplatePlugin

node/NodeTemplatePlugin(options)

청크는 번들 모듈을 내보내는 Node.js 모듈로 래핑되어 있습니다. 엔트리 청크는 청크를 요구함으로써 로드됩니다.

options.asyncChunkLoading (boolean)은 output.chunkLoading으로 'require' 대신 'async-node'를 선택합니다.

LibraryTemplatePlugin

LibraryTemplatePlugin(name, target)

엔트리 청크들은 type 유형의 name 라이브러리로부터 꾸며집니다.

WebWorkerTemplatePlugin

webworker/WebWorkerTemplatePlugin()

청크는 importScripts에 의해 로드됩니다. 그렇지 않다면 JsonpTemplatePlugin과 비슷합니다.

옵션이 없으며 output.chunkLoading을 'import-scripts'로 설정합니다.

EvalDevToolModulePlugin

EvalDevToolModulePlugin(options)

//# sourceURL= 주석(options.sourceUrlComment, 기본값은 //# sourceURL=[url])이 달린 eval로 각 모듈을 감싸 모듈 템플릿을 꾸밉니다.

SourceMapDevToolPlugin

SourceMapDevToolPlugin(options)

각 청크에 대한 소스맵을 생성함으로써 템플릿들을 꾸밉니다.

options.filename은 소스맵의 파일 이름 템플릿입니다. [fullhash], [name], [id], [file] 및 [base]가 교체됩니다. 이 옵션이 없으면 소스맵은 DataUrl로 인라인 됩니다.

options.append, options.moduleFilenameTemplate, options.fallbackModuleFilenameTemplate 및 나머지 옵션은 SourceMapDevToolPlugin 페이지에서 설명합니다.

HotModuleReplacementPlugin

HotModuleReplacementPlugin()

Hot module replacement 대한 지원을 추가합니다. 런타임 코드를 추가한 템플릿을 꾸밉니다. `module.hot' API를 추가합니다.

옵션이 없으며 다음 출력 옵션을 읽습니다.

output.hotUpdateChunkFilename은 hot 업데이트 청크의 파일 이름입니다.

output.hotUpdateMainFilename은 hot 업데이트 매니페스트의 파일 이름입니다.

output.hotUpdateGlobal은 hot 업데이트를 로드하기 위한 전역 함수 이름입니다.

source

모듈의 소스 코드에 영향을 미치는 플러그인입니다.

APIPlugin

__webpack_* 변수(__webpack_public_path__, __webpack_require__, __webpack_modules__, __webpack_chunk_load__, __webpack_hash__, __webpack_nonce__, ...)를 모듈에서 접근 가능하게 하고, require.onError를 런타임 오류 핸들러(__webpack_require__.oe)에 매핑합니다.

CompatibilityPlugin

레거시 패턴을 재작성하여 다른 모듈 로더와의 호환성을 보장합니다. browserify 스타일의 require 위임자, 자체 __webpack_require__를 선언하는 사용자 코드, hashbang 라인 등이 해당됩니다.

ConstPlugin

파서에 의해 발사된 훅을 사용함으로써 dead branch를 추가로 제거를 가능하게 하려고 if (...)문과 삼항 연산자를 평가하여 true/false로 바꾸려고 시도합니다.

프로덕션 모드에는 dead branch와 관련하여 여러 최적화 들이 있습니다.

  • Terser 이 수행한 최적화입니다.
  • Webpack이 수행한 최적화 입니다.

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

ProvidePlugin(definitions)

definitions의 각 name: request 항목에서, name이 모듈에서 사용되면 import ... from <request>/import(<request>)/require(<request>)로 로드된 모듈로 채워집니다.

NodeStuffPlugin

NodeStuffPlugin(options)

Node.js 모듈에서는 일반적으로 사용할 수 있는 항목을 제공합니다.

또한, module을 사용하는 경우에는 일부의 Node.js 항목으로 채워지도록 합니다.

RequireJsStuffPlugin

require.js에서는 일반적으로 사용할 수 있는 항목을 제공합니다.

require[js].config는 제거됩니다. require.version은 0.0.0입니다. requirejs.onError는 require.onError에 매핑이 됩니다.

NodeSourcePlugin

node/NodeSourcePlugin()

이 플러그인은 하위 호환성을 위해 유지되는 no-op입니다. webpack 5는 더 이상 process, Buffer 등의 Node.js 코어 모듈이나 전역 변수를 폴리필하지 않습니다.

NodeTargetPlugin

node/NodeTargetPlugin()

만약 Node.js 환경에서 번들을 실행하는 경우에는 플러그인을 사용해야 합니다.

만약 네이티브 모듈이 번들 되어있더라도 올바르게 로드되도록 보장합니다.

AMDPlugin

dependencies/AMDPlugin(options)

AMD 스타일의 define과 require 모듈을 제공합니다. 또한, require.amd, define.amd 와 webpack_amd_options## 를 파라미터로 전달된 options에 바인딩합니다.

CommonJsPlugin

dependencies/CommonJsPlugin

CommonJs 스타일의 require 모듈을 제공합니다.

RequireContextPlugin

dependencies/RequireContextPlugin()

Provides require.context. Alternative requests for files are derived from the configured resolve options (modules, extensions, mainFiles, enforceExtension).

RequireEnsurePlugin

dependencies/RequireEnsurePlugin()

require.ensure를 제공합니다.

RequireIncludePlugin

dependencies/RequireIncludePlugin()

require.include를 제공합니다.

DefinePlugin

DefinePlugin(definitions)

식별자에 대해 상수를 정의합니다.

definitions은 객체입니다.

optimize

webpack.optimize 네임스페이스 아래의 모든 플러그인은 mode 가 'none'으로 설정된 경우에만 사용해야 합니다. 그렇지 않다면 플러그인은 두 번 적용되어야 합니다.

LimitChunkCountPlugin

optimize/LimitChunkCountPlugin(options)

병합 청크의 제한된 청크 수는 `options.maxChunks'보다 작습니다.

options.chunkOverhead and options.entryChunkMultiplicator are still accepted but no longer have any effect.

전체적인 크기를 가장 많이 줄인 청크가 첫 번째로 병합됩니다. 만약 여러 조합이 같으면 병합된 크기가 작은 것이 선택됩니다.

MergeDuplicateChunksPlugin

optimize/MergeDuplicateChunksPlugin()

같은 모듈의 청크가 병합됩니다.

RemoveEmptyChunksPlugin

optimize/RemoveEmptyChunksPlugin()

모듈을 포함하지 않는 청크(런타임 청크나 엔트리 청크가 아닌 것)는 제거됩니다.

MinChunkSizePlugin

optimize/MinChunkSizePlugin({ minChunkSize })

각 청크의 최소 크기가 minChunkSize가 될 때까지 청크를 병합합니다.

ModuleConcatenationPlugin

ModuleConcatenationPlugin page에 대한 구체적인 내용을 확인해보세요.

FlagIncludedChunksPlugin

optimize/FlagIncludedChunksPlugin()

청크에 포함된 청크의 청크 아이디를 추가합니다. 불필요한 청크 로드를 제거할 수 있습니다.

RealContentHashPlugin

optimize/RealContentHashPlugin()

optimization.realContentHash 옵션이 활성화 될 때, webpack은 내부적으로 RealContentHashPlugin을 컴파일러에 추가합니다.

Hook

RealContentHashPlugin은 해시 업데이트를 커스터마이징할 수 있는 훅인 updateHash 5.8.0+를 제공합니다.

import webpack from "webpack";

const { RealContentHashPlugin } = webpack.optimize;
// ...
compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
  const hooks = RealContentHashPlugin.getCompilationHooks(compilation);
  hooks.updateHash.tap("MyPlugin", (content, oldHash) => {
    // 이곳에서 원하는데로 해시를 계산할 수 있습니다.
  });
});
Edit this page·
« Previous
IgnorePlugin
Next »
LimitChunkCountPlugin

5 Contributors

iAziz786EugeneHlushkoooflorentLegendschenxsan

Translators

kwYoohae kwYoohae