webpack에 의해 패키징된 파일을 내보내기 전에 검사하는 방법

나는 최근에 내보내지기 전에 webpack에 의해 패키징된 내 프런트 엔드 프로젝트의 파일을 검사할 필요가 있었습니다. 이를 우아하고 강력한 방식으로 수행하기 위해 webpack의 내부 작업을 활용할 수 있는 매우 강력한 방법인 webpack 후크를 발견했습니다.

웹팩이란?

webpack은 JavaScript용 모듈 번들러입니다. 프런트 엔드 애플리케이션에는 JavaScript, (희망) Typescript, JSON, HTML, CSS 및 이미지와 같은 많은 유형의 자산이 포함되어 있습니다. webpack(특정 방식으로 파일을 처리하도록 구성한 후)은 브라우저에서 해석할 수 있도록 애플리케이션 모듈을 나타내는 정적 자산을 생성합니다.

웹팩 후크란 무엇입니까?

소프트웨어 개발에서 "후크"는 모듈을 활용하여 다른 동작을 제공하거나 어떤 일이 발생할 때 반응할 수 있도록 하는 코드의 위치입니다. webpack은 다음 유형의 후크를 제공합니다.

Compiler hooks

Compilation hooks

ContextModuleFactory hooks

JavascriptParser hooks

NormalModuleFactory hooks

예를 들면 어떻습니까?

예제 시나리오의 경우 응용 프로그램을 빌드할 때 MY_SUPER_SECRET 문자열이 포함된 파일이 출력되지 않도록 하고 싶다고 가정해 보겠습니다. 아마도 우리는 코드에 민감한 값을 포함하여 개발자로부터 최후의 방어선을 제공하고 webpack이 컴파일하는 것을 방지하기 위해 이렇게 하고 싶을 것입니다. 해당 문자열이 감지되면 webpack은 다음을 수행합니다.

오류가 발생합니다.

빌드 중 어떤 시점에서도 파일을 내보내지 않습니다.

이를 위해 shouldEmit 컴파일러 후크를 살펴보겠습니다. 이 후크는 자산이 방출되기 전에 호출되며 유효성 검사에 실패하면 오류가 발생하고 자산을 방출하지 않을 수 있습니다.

시작하려면 새 플러그인 클래스를 만들고 plugins의 webpack.config 블록에 추가해 보겠습니다.

// src/webpack.config.ts
import { AssetValidatorPlugin } from './plugins/asset-validator-plugin';

module.exports= {
    entry: {...},
    module:{...},
    plugins: [
        new AssetValidatorPlugin(),
        ...
    ]
};

플러그인을 별도의 클래스/파일에 정의했지만 webpack.config 인라인에 포함할 수 있습니다.

이제 플러그인을 살펴보겠습니다.

// src/plugins/asset-validator-plugin.ts
import * as webpack from 'webpack';

export class AssetValidatorPlugin {
  apply(compiler: webpack.Compiler) {
    compiler.hooks.shouldEmit.tap('AssetValidatorPlugin', (compilation: webpack.compilation.Compilation) => {
      this.validateAssets(compilation);
    });
  }

  public validateAssets(compilation: webpack.compilation.Compilation) {
    const assets = Object.entries(compilation.assets);
    const regex = new RegExp('MY_SUPER_SECRET', 'g');

    // Loop through each asset and check to see if it contains any sensitive strings
    for (let i = 0; i < assets.length; i++) {
      const [fileName] = assets[i];
      const asset = compilation.getAsset(fileName);
      const source = asset.source.source();
      const contents = convertSourceToString(source);
      const matches = contents.match(regex);

      if (matches) {
        throw new Error(
          "Our tool has identified the presence of the string 'MY_SUPER_SECRET' in your compiled code. Compilation has been aborted."
        );
      }
    }

    return true;
  }
}

// This function is only needed because asset.source.source() can be a string or ArrayBuffer
const convertSourceToString = (source: string | ArrayBuffer): string => {
  if (typeof source === 'string') {
    return source;
  } else {
    return new TextDecoder().decode(source);
  }
};

그럼 우리 플러그인에 무엇이 포함되어 있는지 검토해 봅시다. 플러그인 클래스를 정의했으며 내부에서 compiler.hooks.shouldEmit 후크에 tap 연결할 수 있습니다. 후크 콜백에서 컴파일의 일부인 모든 자산을 반복하는 정의한 validateAssets() 함수를 호출하고 정규식 일치를 사용하여 문자열이 존재하는지 확인합니다. 그럴 경우 오류가 발생하여 컴파일이 중단되고 파일을 내보내지 않습니다. 특수 문자열이 포함되어 있지 않으면 true 를 반환하고 컴파일이 계속되어 예상대로 패키징된 파일을 내보냅니다.

플러그인에 매개변수를 전달해야 하는 경우 다음과 같이 플러그인 클래스에 생성자를 정의하여 쉽게 수행할 수 있습니다.

constructor(options: MyPluginOptions) {
    this.options = options;
}

결론

이제 웹팩 후크와 이를 활용하여 애플리케이션의 자산이 패키징될 때 추가 동작을 제공하는 방법에 대해 더 잘 이해하셨기를 바랍니다.