Compilation Hooks

Compilation 모듈은 Compiler에서 새 컴파일 또는 빌드를 만드는 데 사용됩니다. compilation 객체는 모든 모듈과 해당 모듈의 디펜던시에 접근할 수 있습니다(대부분 순환 참조). 또한 애플리케이션의 디펜던시 그래프에 있는 모든 모듈의 리터럴 컴파일입니다. 컴파일 단계 동안 모듈은 로드, 봉인, 최적화, 청크, 해시 및 복원됩니다.

Compilation 클래스는 tapable 훅의 hooks 객체를 노출하며 다음과 같은 생명주기 훅을 제공합니다. 컴파일러 훅과 같은 방식으로 탭할 수 있습니다.

compilation.hooks.someHook.tap(/* ... */);

compiler와 마찬가지로 tapAsync 및 tapPromise도 훅 유형에 따라 사용할 수 있습니다.

buildModule

SyncHook

모듈 빌드가 시작되기 전에 트리거되며 모듈을 수정하는 데 사용할 수 있습니다.

콜백 파라미터: module

compilation.hooks.buildModule.tap(
  "SourceMapDevToolModuleOptionsPlugin",
  (module) => {
    module.useSourceMap = true;
  },
);

rebuildModule

SyncHook

모듈을 다시 빌드하기 전에 시작됩니다.

콜백 파라미터: module

failedModule

SyncHook

모듈 빌드가 실패하면 실행합니다.

콜백 파라미터: module error

succeedModule

SyncHook

모듈이 성공적으로 빌드되었을 때 실행됩니다.

콜백 파라미터: module

stillValidModule

SyncHook

모듈이 여전히 유효하여 재빌드되지 않는 경우 호출됩니다. 예를 들어 캐시가 아직 최신 상태인 경우입니다.

콜백 파라미터: module

addEntry

SyncHook

엔트리와 그 디펜던시가 추가되기 시작할 때, 즉 모듈이 빌드되기 전에 호출됩니다. 모든 호출 이후에는 succeedEntry 또는 failedEntry가 뒤따릅니다.

콜백 파라미터: entry options

entry는 엔트리 Dependency이며, options는 함께 추가된 엔트리 옵션입니다.

succeedEntry

SyncHook

엔트리와 그 디펜던시가 성공적으로 추가되었을 때 호출됩니다.

콜백 파라미터: entry options module

entry는 엔트리 Dependency이며, options는 함께 추가된 엔트리 옵션입니다.

failedEntry

SyncHook

엔트리 추가가 실패했을 때 호출됩니다.

콜백 파라미터: entry options error

finishModules

AsyncSeriesHook

모든 모듈이 에러없이 빌드되었을 때 호출됩니다.

콜백 파라미터: modules

finishRebuildingModule

AsyncSeriesHook

성공하거나 에러가 있는 경우 모듈이 다시 빌드 될 때 실행됩니다.

콜백 파라미터: module

seal

SyncHook

컴파일이 새로운 모듈을 받는 것이 중지되면 시작됩니다.

unseal

SyncHook

컴파일이 새로운 모듈을 받기 시작할 때 시작됩니다.

optimizeDependencies

SyncBailHook

디펜던시 최적화가 시작할 때 시작됩니다.

콜백 파라미터: modules

afterOptimizeDependencies

SyncHook

디펜던시 최적화 후 시작됩니다.

콜백 파라미터: modules

dependencyReferencedExports

SyncWaterfallHook

디펜던시가 참조하는 exports와 함께 호출되어 이를 변경할 수 있습니다. 결과는 optimization.usedExports가 해당 디펜던시에서 무엇을 유지할지를 결정합니다.

콜백 파라미터: referencedExports dependency runtime

beforeChunks

SyncHook

엔트리포인트로부터 청크가 생성되기 직전, 즉 청크 그래프가 존재하기 전에 호출됩니다.

afterChunks

SyncHook

5.83.0+

'afterChunks' 훅은 청크 및 모듈 그래프 생성 후 최적화 전에 호출됩니다. 이 훅은 필요한 경우 청크 그래프를 검사, 분석 및 수정할 수 있는 기회를 제공합니다.

다음은 compilation.hooks.afterChunks 훅을 활용하는 방법에 대한 예시입니다.

콜백 파라미터: chunks

optimize

SyncHook

최적화 단계가 시작될 때 트리거됩니다.

optimizeModules

SyncBailHook

모듈 최적화 단계가 시작될 때 호출됩니다. 플러그인은 이 훅을 활용하여 모듈에 대한 최적화를 수행할 수 있습니다.

콜백 파라미터: modules

afterOptimizeModules

SyncHook

모듈 최적화가 완료된 후 호출됩니다.

콜백 파라미터: modules

optimizeChunks

SyncBailHook

청크 최적화 단계가 시작될 때 호출됩니다. 플러그인은 이 훅을 활용하여 청크에 대한 최적화를 수행할 수 있습니다.

콜백 파라미터: chunks chunkGroups

afterOptimizeChunks

SyncHook

청크 최적화가 완료된 후 시작됩니다.

콜백 파라미터: chunks chunkGroups

optimizeTree

AsyncSeriesHook

디펜던시 트리를 최적화하기 전에 호출됩니다. 플러그인은 이 훅을 활용하여 디펜던시 트리 최적화를 수행할 수 있습니다.

콜백 파라미터: chunks modules

afterOptimizeTree

SyncHook

디펜던시 트리 최적화가 성공적으로 완료된 후에 호출됩니다.

콜백 파라미터: chunks modules

optimizeChunkModules

AsyncSeriesBailHook

청크 모듈 최적화 시작시 트리 최적화 후에 호출됩니다. 플러그인은 이 훅을 활용하여 청크 모듈의 최적화를 수행할 수 있습니다.

콜백 파라미터: chunks modules

afterOptimizeChunkModules

SyncHook

청크 모듈 최적화가 성공적으로 완료된 후에 호출됩니다.

콜백 파라미터: chunks modules

shouldRecord

SyncBailHook

레코드 저장 여부를 결정하기 위해 호출됩니다. false를 반환하면 "record" 훅의 실행이 방지됩니다(record, recordModules, recordChunks 그리고 recordHash). 다른 값을 반환하면 실행이 허용됩니다.

reviveModules

SyncHook

레코드에서 모듈 정보를 복원합니다.

콜백 파라미터: modules records

beforeModuleIds

SyncHook

각 모듈에 id를 할당하기 전에 실행됩니다.

콜백 파라미터: modules

moduleIds

SyncHook

각 모듈에 id를 할당하기 위해 호출됩니다.

콜백 파라미터: modules

optimizeModuleIds

SyncHook

모듈 id 최적화 시작시 호출됩니다.

콜백 파라미터: modules

afterOptimizeModuleIds

SyncHook

모듈 id 최적화 단계가 완료되면 호출됩니다.

콜백 파라미터: modules

reviveChunks

SyncHook

레코드에서 청크 정보를 복원합니다.

콜백 파라미터: chunks records

beforeChunkIds

SyncHook

각 청크에 id를 할당하기 전에 실행됩니다.

콜백 파라미터: chunks

chunkIds

SyncHook

각 청크에 id를 할당하기 위해 호출됩니다.

콜백 파라미터: chunks

optimizeChunkIds

SyncHook

청크 id 최적화 단계 시작시 호출됩니다.

콜백 파라미터: chunks

afterOptimizeChunkIds

SyncHook

청크 id 최적화가 완료된 후에 트리거됩니다.

콜백 파라미터: chunks

recordModules

SyncHook

레코드에 모듈 정보를 저장합니다. 이것은 shouldRecord가 참과 같은 값을 반환하는 경우 트리거됩니다.

콜백 파라미터: modules records

recordChunks

SyncHook

청크 정보를 레코드에 저장합니다. 이는 shouldRecord가 참과 같은 값을 반환하는 경우에만 트리거됩니다.

콜백 파라미터: chunks records

renderManifest

SyncWaterfallHook

청크의 렌더 매니페스트를 수집하기 위해 호출됩니다. 즉, 청크가 렌더링하는 파일 목록과 각 파일이 생성되는 방식입니다. 청크에 추가 파일 형식을 내보내는 플러그인은 여기에 항목을 추가합니다.

콜백 파라미터: result options

renderEmbeddedSource

5.110.0+

AsyncSeriesWaterfallHook

모듈이 다른 언어 안에 내보내는 소스를 삽입 전에 호출합니다. 현재는 JavaScript 문자열 literal로 번들에 포함되는 CSS 또는 HTML입니다. 필요하면 변환한 뒤 삽입할 소스를 반환합니다.

Callback 파라미터: source, info

info에는 삽입되는 소스의 타입인 type("css" 또는 "html"), 삽입 대상 타입인 hostType("javascript"), 생성 중인 모듈인 module이 포함되므로 하나의 tap으로 모든 조합을 처리할 수 있습니다.

compilation.hooks.renderEmbeddedSource.tapPromise(
  "MyPlugin",
  async (source, info) => {
    if (info.type !== "css") return source;
    return new RawSource(await minifyCss(source.source()));
  },
);

이 소스는 애셋에 포함되지 않으므로 애셋 수준 minimizer에서 접근할 수 없습니다. 이 hook은 이를 처리하기 위한 것입니다.

embeddedSourceHash

5.110.0+

SyncHook

다른 언어의 소스를 포함하는 모듈을 hashing할 때 호출됩니다. renderEmbeddedSource tap의 결과를 변경하는 값을 모듈 hash에 추가하세요.

Callback 파라미터: module, hash

optimizeCodeGeneration

SyncHook

코드 생성 직전에 모든 모듈과 함께 호출되어, 코드 생성에 영향을 줄 수 있습니다.

콜백 파라미터: modules

beforeCodeGeneration

SyncHook

코드 생성 단계가 시작되기 전에 호출됩니다.

afterCodeGeneration

SyncHook

코드 생성 단계가 완료된 후에 호출됩니다.

beforeRuntimeRequirements

SyncHook

모듈, 청크 및 청크 트리의 런타임 요구사항이 수집되기 전에 호출됩니다.

additionalModuleRuntimeRequirements

SyncHook

플러그인이 모듈에 필요한 런타임 요구사항(RuntimeGlobals)을 추가할 수 있도록 각 모듈에 대해 호출됩니다.

콜백 파라미터: module runtimeRequirements context

runtimeRequirementInModule

HookMap<SyncBailHook>

모듈이 이미 가지고 있는 런타임 요구사항마다 한 번씩 호출되어, 플러그인이 전체 집합을 검사하는 대신 하나의 요구사항에 반응할 수 있습니다. 적용할 RuntimeGlobals 값을 for를 통해 탭하세요.

콜백 파라미터: module runtimeRequirements context

runtimeRequirements는 이 모듈에 수집된 Set이며, context는 chunkGraph와 codeGenerationResults를 가지고 있습니다.

탭 내부에서 해당 집합에 요구사항을 추가하면 동일한 패스 내에서 추가된 요구사항의 훅이 예약됩니다. 이것이 하나의 요구사항이 필요한 다른 요구사항들을 가져오는 방식입니다. webpack 자체도 이런 방식으로 쌍을 선언합니다 — moduleId를 요청하면 module도 함께 가져옵니다.

compilation.hooks.runtimeRequirementInModule
  .for(webpack.RuntimeGlobals.moduleId)
  .tap("MyPlugin", (module, set) => {
    set.add(webpack.RuntimeGlobals.module);
  });

SyncBailHook이므로 탭에서 값을 반환하면 해당 요구사항에 대한 나머지 탭들은 건너뜁니다.

additionalChunkRuntimeRequirements

SyncHook

플러그인이 청크에 필요한 런타임 요구사항을 추가할 수 있도록 각 청크에 대해 호출됩니다.

콜백 파라미터: chunk runtimeRequirements context

runtimeRequirementInChunk

HookMap<SyncBailHook>

runtimeRequirementInModule의 청크별 대응으로, 동일한 방식으로 탭합니다. 수신하는 집합은 청크 내 모든 모듈의 요구사항의 합집합입니다.

콜백 파라미터: chunk runtimeRequirements context

additionalTreeRuntimeRequirements

SyncHook

플러그인이 전체 청크 트리에 대한 런타임 요구사항을 추가할 수 있도록 각 엔트리 청크에 대해 호출됩니다. 대부분의 런타임 모듈이 주입되는 곳입니다.

콜백 파라미터: chunk runtimeRequirements context

runtimeRequirementInTree

HookMap<SyncBailHook>

runtimeRequirementInModule의 전체 트리 대응으로, 대부분의 런타임 모듈이 연결되는 훅입니다. chunk는 엔트리 청크이며, 집합은 엔트리가 참조하는 모든 청크의 요구사항의 합집합입니다.

콜백 파라미터: chunk runtimeRequirements context

요구사항을 그것이 내포하는 것들로 확장하는 방식은 위와 동일하며, 다른 용도는 addRuntimeModule로 구현 런타임 모듈을 연결하는 것입니다. 반환 값은 해당 요구사항에 대한 추가 탭을 중지시킵니다.

compilation.hooks.runtimeRequirementInTree
  .for(webpack.RuntimeGlobals.publicPath)
  .tap("MyPlugin", (chunk) => {
    compilation.addRuntimeModule(chunk, new MyRuntimeModule());
    return true;
  });

runtimeModule

SyncHook

런타임 모듈이 청크에 추가된 후에 호출되며, 생성된 코드를 수정하는 데 사용할 수 있습니다.

콜백 파라미터: module chunk

afterRuntimeRequirements

SyncHook

모든 런타임 요구사항이 수집된 후에 호출됩니다.

beforeModuleHash

SyncHook

모듈이 해시되기 전에 호출됩니다.

afterModuleHash

SyncHook

모듈이 해시 된 후에 호출됩니다.

beforeHash

SyncHook

컴파일이 해시되기 전에 호출됩니다.

afterHash

SyncHook

컴파일이 해시되기 전에 호출됩니다.

fullHash

SyncHook

모든 모듈과 청크가 기여한 후 컴파일 해시와 함께 호출되어, 추가 데이터를 해시에 포함시킬 수 있습니다.

콜백 파라미터: hash

contentHash

SyncHook

각 청크의 해시가 계산된 후 호출됩니다. 여기서 소스 타입별 콘텐츠 해시가 추가됩니다.

콜백 파라미터: chunk

recordHash

SyncHook

레코드 해시에 대한 정보를 records에 저장합니다. 이는 shouldRecord가 참과 같은 값을 반환하는 경우에만 트리거됩니다.

콜백 파라미터: records

record

SyncHook

compilation에 대한 정보를 records에 저장합니다. 이는 shouldRecord가 참과 같은 값을 반환하는 경우에만 트리거됩니다.

콜백 파라미터: compilation records

beforeModuleAssets

SyncHook

모듈 애셋이 생성되기 전에 실행됩니다.

additionalChunkAssets

SyncHook

청크에 대한 추가 애셋을 만듭니다.

콜백 파라미터: chunks

shouldGenerateChunkAssets

SyncBailHook

청크 애셋을 만들지 결정하기 위해 호출됩니다. !== false를 반환하면 청크 애셋을 생성합니다.

beforeChunkAssets

SyncHook

청크 애셋을 만들기 전에 실행됩니다.

additionalAssets

AsyncSeriesHook

컴파일을 위한 추가 애셋을 만듭니다. 이 훅은 이미지를 다운로드하는 데 사용할 수 있습니다. 예를 들면 다음과 같습니다.

compilation.hooks.additionalAssets.tapAsync("MyPlugin", (callback) => {
  download("https://img.shields.io/npm/v/webpack.svg", (resp) => {
    if (resp.status === 200) {
      compilation.assets["webpack-version.svg"] = toAsset(resp);
      callback();
    } else {
      callback(
        new Error("[webpack-example-plugin] Unable to download the image"),
      );
    }
  });
});

optimizeChunkAssets

AsyncSeriesHook

청크 애셋을 최적화하세요. 애셋은 compilation.assets에 저장됩니다. Chunk에는 청크로 생성된 모든 파일을 가리키는 files 프로퍼티가 있습니다. 추가 청크 애셋은 compilation.additionalChunkAssets에 저장됩니다.

콜백 파라미터: chunks

다음은 단순히 각 청크에 배너를 추가하는 예시입니다.

compilation.hooks.optimizeChunkAssets.tapAsync(
  "MyPlugin",
  (chunks, callback) => {
    for (const chunk of chunks) {
      for (const file of chunk.files) {
        compilation.assets[file] = new ConcatSource(
          "/**Sweet Banner**/",
          "\n",
          compilation.assets[file],
        );
      }
    }

    callback();
  },
);

afterOptimizeChunkAssets

SyncHook

청크 애셋이 최적화된 후에 호출됩니다.

콜백 파라미터: chunks

다음은 각 청크에 들어간 내용을 정확히 출력하는 @boopathi의 플러그인 예시입니다.

compilation.hooks.afterOptimizeChunkAssets.tap("MyPlugin", (chunks) => {
  for (const chunk of chunks) {
    console.log({
      id: chunk.id,
      name: chunk.name,
      includes: chunk.getModules().map((module) => module.request),
    });
  }
});

optimizeAssets

AsyncSeriesHook

compilation.assets에 저장된 모든 애셋을 최적화합니다.

콜백 파라미터: assets

afterOptimizeAssets

SyncHook

애셋이 최적화된 후에 호출됩니다.

콜백 파라미터: assets

processAssets

AsyncSeriesHook

애셋을 처리합니다.

훅 파라미터:

name: string — 플러그인의 이름
stage: Stage — 활용되는 단계. 아래의 지원되는 단계 목록을 참고하세요.
additionalAssets?: true | (assets, [callback]) => (void | Promise<void>) — 추가 애셋을 위한 콜백. 아래를 참고하세요.

콜백 파라미터:

assets: { [pathname: string]: Source } — 키는 애셋의 경로 이름이고 값은 Source로 표시되는 애셋의 데이터인 순수 객체입니다.

예시

compilation.hooks.processAssets.tap(
  {
    name: "MyPlugin",
    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // 더 많은 단계는 아래를 참고하세요.
  },
  (assets) => {
    console.log("List of assets and their sizes:");
    for (const [pathname, source] of Object.entries(assets)) {
      console.log(`— ${pathname}: ${source.size()} bytes`);
    }
  },
);

Additional assets

name 및 stage 외에도 true 값을 허용하는 additionalAssets 5.8.0+ 옵션 또는 assets을 첫 번째 인수로 받는 콜백 함수를 전달할 수 있습니다.

true — 나중에 플러그인에 의해 추가된 애셋에 대해 제공된 콜백을 다시 실행하세요.

이 모드에서 콜백은 지정된 단계 이전에 추가된 애셋에 대해 한 번, 나중에 플러그인에 의해 추가된 애셋에 대해 이 단계 또는 다음 단계에 추가로 여러 번 호출됩니다.
```
compilation.hooks.processAssets.tap(
  {
    name: "MyPlugin",
    stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
    additionalAssets: true,
  },
  (assets) => {
    // 이 함수는 각각의 에셋에 대해 여러 번 호출됩니다.
  },
);
```

(assets, [callback]) => (void | Promise<void>) — 나중에 플러그인에서 추가한 애셋에 대해 이 단계 또는 다음 단계에서 지정된 콜백을 실행합니다. 콜백은 사용 된 탭 방법의 유형을 존중해야합니다. 예를 들면, tapPromise ()와 함께 사용하면 프로미스를 반환해야합니다.

compilation.hooks.processAssets.tap(
  {
    name: "MyPlugin",
    stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
    additionalAssets: (assets) => {
      // 이 함수는 이후 단계에서 추가된 애셋에 대해 여러번 호출될 가능성이 있습니다.
    },
  },
  (assets) => {
    // 이 함수는 이전 단계에서 플러그인에 의해 추가된 애셋에 대해 한 번 호출됩니다.
  },
);

Choosing a stage

processAssets는 애셋을 생성하고 변경하는 훅으로, 스테이지는 파이프라인에서 작업이 배치되는 위치를 결정합니다. 플러그인이 수행하는 작업에 따라 스테이지를 선택하세요.

플러그인이 수행하는 작업	스테이지
자체적인 새 파일을 내보냄	`PROCESS_ASSETS_STAGE_ADDITIONAL`
기존 애셋에 추가, 예: 배너	`PROCESS_ASSETS_STAGE_ADDITIONS`
최소화	`PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE`
동반 파일 작성, 예: 소스맵	`PROCESS_ASSETS_STAGE_DEV_TOOLING`
압축 복사본 준비	`PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER`
변경 없이 모든 애셋 읽기, 예: 매니페스트	`PROCESS_ASSETS_STAGE_SUMMARIZE`

스테이지는 플러그인들이 조합될 수 있게 하는 요소입니다. ADDITIONAL에서 내보낸 파일은 아직 최소화기, 소스맵 스테이지, 압축기보다 앞에 있으므로 webpack이 직접 생성한 청크와 동일한 처리를 받습니다. 이것이 컴파일러의 emit 훅에서 애셋을 추가하는 것이 잘못된 이유입니다. 그 훅은 이 모든 것 이후에 실행되므로 다운스트림에서는 파일을 볼 수 없습니다.

스테이지를 잘못 선택하면 동일한 형태의 결과를 초래합니다. SUMMARIZE에서 내보내면 OPTIMIZE_SIZE가 이미 실행된 후이므로 파일이 최소화되지 않은 채로 작성됩니다. ADDITIONAL에서 애셋을 읽으면 그 이후에 추가된 모든 것이 목록에서 누락됩니다.

List of asset processing stages

다음은 지원되는 단계를 처리 순서대로 나열한 목록입니다.

PROCESS_ASSETS_STAGE_ADDITIONAL — 컴파일에 추가 애셋을 추가합니다.
PROCESS_ASSETS_STAGE_PRE_PROCESS — 애셋의 기본 전처리.
PROCESS_ASSETS_STAGE_DERIVED — 기존 애셋에서 새 애셋을 가져옵니다.
PROCESS_ASSETS_STAGE_ADDITIONS — 기존 애셋에 배너 또는 초기화 코드 같은 추가 섹션을 추가합니다.
PROCESS_ASSETS_STAGE_OPTIMIZE — 일반적인 방식으로 기존 애셋을 최적화합니다.
PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT — 기존 애셋의 수를 최적화합니다(예. 애셋 병합).
PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY — 기존 애셋의 호환성 최적화(예. 폴리필 또는 vendor 접두사 추가).
PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE — 기존 애셋의 크기 최적화(예. 공백을 최소화하거나 생략).
PROCESS_ASSETS_STAGE_DEV_TOOLING — 애셋에 개발 도구 추가(예. 소스맵 추출)
PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE 5.8.0+ — 기존 애셋 수 최적화(예. 애셋을 다른 애셋에 인라인으로 추가).
PROCESS_ASSETS_STAGE_SUMMARIZE — 기존 애셋 목록을 요약합니다.
PROCESS_ASSETS_STAGE_OPTIMIZE_HASH — 애셋의 해시를 최적화합니다(예. 애셋 콘텐츠의 실제 해시를 생성).
PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER — 기존 애셋의 전송 최적화(예. 압축(gzip) 파일을 별도의 애셋으로 준비).
PROCESS_ASSETS_STAGE_ANALYSE — 기존 애셋을 분석합니다.
PROCESS_ASSETS_STAGE_REPORT — 리포팅 목적으로 애셋을 생성합니다.

Assets info

훅에 "asset info" 메타 데이터가 자동으로 제공되지 않습니다. 필요한 경우 컴파일 인스턴스와 제공된 애셋 경로 이름을 사용하여 이 메타 데이터를 수동으로 해결해야 합니다. 이것은 webpack의 차기 버전에서 개선될 것입니다.

Example:

compilation.hooks.processAssets.tap(
  {
    /** … */
  },
  (assets) => {
    for (const [pathname, source] of Object.entries(assets)) {
      const assetInfo = compilation.assetsInfo.get(pathname);
      // @todo: "pathname", "source", "assetInfo"를 사용해 작업합니다.
    }
  },
);

processAdditionalAssets

AsyncSeriesHook

processAssets가 실행되는 동안 추가된 애셋과 함께 호출되어, 플러그인이 동일한 스테이지에서 다른 플러그인이 생성한 애셋을 처리할 수 있습니다.

콜백 파라미터: assets

afterProcessAssets

SyncHook

processAssets 훅이 에러없이 완료된 후에 호출됩니다.

needAdditionalSeal

SyncBailHook

다른 파일을 포함하기 위해 컴파일을 봉인 해제해야 하는지 확인하기 위해 호출됩니다.

afterSeal

AsyncSeriesHook

needAdditionalSeal 바로 뒤에 실행됩니다.

chunkHash

SyncHook

각 청크에 대한 해시를 방출하도록 트리거됩니다.

콜백 파라미터: chunk chunkHash context

context는 chunkGraph, moduleGraph, runtimeTemplate, codeGenerationResults를 담고 있는 ChunkHashContext입니다.

moduleAsset

SyncHook

모듈의 애셋이 컴파일에 추가될 때 호출됩니다.

콜백 파라미터: module filename

chunkAsset

SyncHook

청크의 애셋이 컴파일에 추가될 때 트리거됩니다.

콜백 파라미터: chunk filename

assetPath

SyncWaterfallHook

애셋의 경로를 결정하기 위해 호출됩니다.

콜백 파라미터: path options assetInfo

needAdditionalPass

SyncBailHook

애셋이 방출된 후 추가로 처리되어야 하는지 여부를 판별하기 위해 호출됩니다.

processErrors

SyncWaterfallHook

보고되기 전에 컴파일의 오류와 함께 호출되며, 보고할 목록을 반환합니다. 더 짧은 배열을 반환하면 오류가 제거됩니다.

콜백 파라미터: errors

processWarnings

SyncWaterfallHook

보고되기 전에 컴파일의 경고와 함께 호출됩니다. ignoreWarnings가 경고를 필터링하는 방식입니다.

콜백 파라미터: warnings

prepareModuleExecution

AsyncParallelHook

빌드 시간에 모듈이 실행되기 전에 호출되어, 실행을 준비할 수 있습니다.

콜백 파라미터: options context

executeModule

SyncHook

런타임이 아닌 빌드 중에 모듈이 실행될 때 호출됩니다. compilation.executeModule과 로더의 importModule 뒤의 메커니즘입니다.

콜백 파라미터: options context

childCompiler

SyncHook

자식 컴파일러를 설정한 후 실행됩니다.

콜백 파라미터: childCompiler compilerName compilerIndex

log

SyncBailHook

활성화된 경우 stats에 로그를 기록할 수 있습니다. stats.logging, stats.loggingDebug 및 stats.loggingTrace 옵션을 참조하세요.

콜백 파라미터: origin, logEntry

normalModuleLoader

webpack v5부터 normalModuleLoader 훅이 제거되었기 때문에, 이제 로더에 액세스하려면 NormalModule.getCompilationHooks(compilation).loader를 사용하세요.

statsPreset

HookMap

이 HookMap은 사전 설정이 사용될 때 트리거되는 작업 목록과 같습니다. 옵션 객체를 사용합니다. 플러그인이 사전 설정을 관리할 때에는 기존 설정을 바꾸지 않고 이 객체의 설정을 신중하게 변경해야 합니다.

콜백 파라미터: options context

플러그인 예시는 다음과 같습니다.

compilation.hooks.statsPreset.for("my-preset").tap("MyPlugin", (options) => {
  if (options.all === undefined) options.all = true;
});

이 플러그인은 사전 설정 'my-preset'에 대해 all 옵션이 정의되지 않은 경우 기본값이 true로 설정되도록 합니다.

statsNormalize

SyncHook

이 훅은 옵션 객체를 후속 흑에서 쉽게 사용할 수 있는 일관된 형식으로 변환하는 데 사용됩니다. 또한 누락된 옵션이 기본값으로 설정되도록 보장합니다.

콜백 파라미터: options context

플러그인 예시는 다음과 같습니다.

compilation.hooks.statsNormalize.tap("MyPlugin", (options) => {
  if (options.myOption === undefined) options.myOption = [];

  if (!Array.isArray(options.myOption)) options.myOptions = [options.myOptions];
});

이 플러그인에서는 myOption이 없으면 빈 배열로 설정합니다. 또한 myOption이 원래 단일 값으로 정의된 경우에도 항상 배열임을 보장합니다.

statsFactory

이 훅은 특정 옵션에서 StatsFactory 클래스에 대한 액세스를 제공합니다.

콜백 파라미터: statsFactory options

StatsFactory.hooks.extract

HookMap

콜백 파라미터: object data context

data에는 클래스가 포함되어 있습니다. object는 속성을 추가해야 하는 객체입니다. context는 경로의 클래스와 같은 상황별 정보를 제공합니다.

Example:

compilation.hooks.statsFactory.tap("MyPlugin", (statsFactory, options) => {
  statsFactory.hooks.extract
    .for("compilation")
    .tap("MyPlugin", (object, compilation) => {
      object.customProperty = MyPlugin.getCustomValue(compilation);
    });
});

StatsFactory.hooks.result

HookMap

각 레벨의 결과와 함께 호출됩니다.

콜백 파라미터: result context

statsPrinter

이 훅은 특정 옵션에서 StatsPrinter 클래스에 대한 액세스를 제공합니다.

콜백 파라미터: statsPrinter options

StatsPrinter.hooks.print

HookMap

이 훅은 파트를 출력해야 할 때 호출됩니다.

콜백 파라미터: object context

StatsPrinter.hooks.result

HookMap

이 훅은 파트의 결과 문자열에 대해 호출됩니다.

콜백 파라미터: result context

CssModulesPlugin.getCompilationHooks(compilation)

experiments.css가 활성화되면 내부 CssModulesPlugin은 plugin 작성자를 위해 compilation별 hook 집합을 노출합니다. 이 hook들은 정적 메서드 getCompilationHooks(compilation)을 통해 접근할 수 있습니다.

const webpack = require("webpack");

class MyCssPlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap("MyCssPlugin", (compilation) => {
      const hooks =
        webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
      // 여기에서 hook에 tap 합니다.
    });
  }
}

orderModules

5.107.0+

SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>

청크의 module이 전체 module 이름 기준으로 미리 정렬된 상태에서, 각 CSS source type(CSS imports 및 CSS modules)마다 한 번씩 호출됩니다. tap은 webpack의 기본 import-order topological sort를 덮어쓸 정렬된 Module[]를 반환할 수 있고, 기본 순서를 유지하려면 undefined를 반환하면 됩니다.

이 hook은 webpack의 topological sort가 import 재구성만으로 해결할 수 없는 Conflicting order between css ... 경고를 발생시킬 때 권장되는 escape hatch입니다. 미리 정렬된 배열(또는 임의의 deterministic 순서)을 반환하면 애플리케이션 코드를 변경하지 않고도 build가 안정적인 순서를 선택할 수 있습니다.

콜백 파라미터: chunk modules compilation

const webpack = require("webpack");

class CssOrderByPathPlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap(
      "CssOrderByPathPlugin",
      (compilation) => {
        const hooks =
          webpack.css.CssModulesPlugin.getCompilationHooks(compilation);

        // module은 전체 module 이름 기준으로 미리 정렬된 상태로 전달됩니다.
        // 그대로 반환하면 rebuild 간에 deterministic한 파일 경로 순서를
        // 유지하고 conflicting-order 경고를 피할 수 있습니다.
        hooks.orderModules.tap(
          "CssOrderByPathPlugin",
          (_chunk, modules) => modules,
        );
      },
    );
  }
}

이 hook은 SyncBailHook이므로, undefined가 아닌 값을 처음 반환한 tap이 우선합니다. 그 이후의 tap은 해당 호출에 대해 실행되지 않습니다.

HtmlModulesPlugin.getCompilationHooks(compilation)

5.109.0+

experiments.html이 활성화되면 내부 HtmlModulesPlugin은 emit된 HTML page를 주입하고 변환하기 위한 compilation별 hook 집합을 노출합니다. 정적 getCompilationHooks(compilation) 메서드를 통해 접근하세요.

const webpack = require("webpack");

class MyHtmlPlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap("MyHtmlPlugin", (compilation) => {
      const hooks =
        webpack.html.HtmlModulesPlugin.getCompilationHooks(compilation);
      // 여기에서 hook에 tap합니다.
    });
  }
}

injectTags

AsyncSeriesWaterfallHook<[HtmlTagDescriptor[], { outputName, html }]>

각 page에 주입할 추가 tag 목록(초기값은 빈 배열)과 현재 HTML을 함께 받아 호출됩니다. descriptor를 push하고 목록을 반환하면 webpack이 이를 직렬화하여 배치합니다. output.html.csp보다 먼저 실행되므로, 주입된 inline <script> / <style> tag도 page 자체 tag처럼 hash됩니다.

각 HtmlTagDescriptor는 다음을 허용합니다.

tag (string): tag 이름입니다. 예: 'script' / 'link' / 'meta'.
attrs (object): attribute입니다. true는 값 없는 boolean attribute로 렌더링하고, false / undefined는 생략합니다.
children (string): 내부 content입니다(<link> / <meta> 같은 void element에서는 무시됨).
injectTo ('head' | 'body' | 'head-prepend' | 'body-prepend'): 배치 위치입니다. 기본값은 'head'입니다.
voidTag (boolean): void element(닫는 tag 없음)를 강제합니다. 생략하면 tag 이름에서 추론합니다.

hooks.injectTags.tap("MyHtmlPlugin", (tags) => {
  tags.push({
    tag: "meta",
    attrs: { name: "theme-color", content: "#2b3a42" },
  });
  return tags;
});

transformTags

AsyncSeriesHook<[HtmlMutableTag[], { outputName, html }]>

page의 기존 <script> / <link> / <style> / <meta> tag(webpack 자체 tag와 주입된 tag 모두)를 mutable descriptor로 받아 호출됩니다. attrs를 변경하거나(nonce / data-* attribute 추가, defer와 async 전환 등), remove: true를 설정하거나, injectTo를 변경해 tag를 <head>와 <body> 사이로 이동할 수 있습니다. webpack은 변경된 tag를 다시 작성합니다. 새 tag는 injectTags로 추가하고, 배열 자체의 순서는 재정렬하지 마세요.

transformHtml

AsyncSeriesWaterfallHook<[string, { outputName: string }]>

emit된 각 page의 최종 HTML(모든 placeholder가 해석된 상태)이 작성되기 직전에 호출됩니다. 예를 들어 minify를 위해 변환된 HTML을 반환할 수 있습니다.

hooks.transformHtml.tapPromise("MyHtmlPlugin", async (html, { outputName }) =>
  html.replace("<!-- banner -->", "..."),
);

htmlEmitted

AsyncSeriesHook<[{ outputName: string }]>

각 page의 HTML asset이 finalized되면 한 번 호출됩니다. emit 이후 알림입니다.

Edit this page·

« Previous

Compiler Hooks

ContextModuleFactory Hooks

9 Contributors

Translators

YukJiSoo