Compilation Hooks

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

Compilation 클래스는 Tapable을 확장하고 다음과 같은 생명주기 훅을 제공합니다. 컴파일러 훅과 같은 방식으로 탭할 수 있습니다.

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

finishModules

AsyncSeriesHook

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

• 콜백 파라미터: modules

finishRebuildingModule

SyncHook

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

• 콜백 파라미터: module

seal

SyncHook

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

unseal

SyncHook

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

optimizeDependencies

SyncBailHook

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

• 콜백 파라미터: modules

afterOptimizeDependencies

SyncHook

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

• 콜백 파라미터: modules

afterChunks

SyncHook

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

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

• 콜백 파라미터: chunks

optimize

SyncHook

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

optimizeModules

SyncBailHook

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

• 콜백 파라미터: modules

afterOptimizeModules

SyncHook

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

• 콜백 파라미터: modules

optimizeChunks

SyncBailHook

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

• 콜백 파라미터: chunks

afterOptimizeChunks

SyncHook

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

• 콜백 파라미터: chunks

optimizeTree

AsyncSeriesHook

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

• 콜백 파라미터: chunks modules

afterOptimizeTree

SyncHook

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

• 콜백 파라미터: chunks modules

optimizeChunkModules

SyncBailHook

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

• 콜백 파라미터: 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

beforeModuleHash

SyncHook

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

afterModuleHash

syncHook

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

beforeHash

SyncHook

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

afterHash

SyncHook

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

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을 첫 번째 인수로 받는 콜백 함수를 전달할 수 있습니다.

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

   이 모드에서 콜백은 지정된 단계 이전에 추가된 애셋에 대해 한 번, 나중에 플러그인에 의해 추가된 애셋에 대해 이 단계 또는 다음 단계에 추가로 여러 번 호출됩니다.

   Copy

   compilation.hooks.processAssets.tap(
     {
       name: "MyPlugin",
       stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
       additionalAssets: true,
     },
     (assets) => {
       // 이 함수는 각각의 에셋에 대해 여러 번 호출됩니다.
     },
   );

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

   Copy

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

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"를 사용하여 작업해줍니다.
    }
  },
);

afterProcessAssets

SyncHook

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

needAdditionalSeal

SyncBailHook

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

afterSeal

AsyncSeriesHook

needAdditionalSeal 바로 뒤에 실행됩니다.

chunkHash

SyncHook

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

• 콜백 파라미터: chunk chunkHash

moduleAsset

SyncHook

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

• 콜백 파라미터: module filename

chunkAsset

SyncHook

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

• 콜백 파라미터: chunk filename

assetPath

SyncWaterfallHook

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

• 콜백 파라미터: path options

needAdditionalPass

SyncBailHook

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

childCompiler

SyncHook

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

• 콜백 파라미터: childCompiler compilerName compilerIndex

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

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은 해당 호출에 대해 실행되지 않습니다.