Experiments

experiments

boolean: false

사용자가 실험적 기능을 활성화하고 시험해 볼 수 있는 권한을 부여하기 위해 experiments 옵션이 webpack 5에 도입되었습니다.

사용 가능한 옵션은 다음과 같습니다.

webpack.config.js

module.exports = {
  //...
  experiments: {
    asyncWebAssembly: true,
    buildHttp: true,
    layers: true,
    lazyCompilation: true,
    outputModule: true,
    syncWebAssembly: true,
    topLevelAwait: true,
  },
};

experiments.backCompat

다수의 webpack 4 API에 대한 지원 중단 경고와 함께 이전 버전과 호환되는 레이어를 활성화합니다.

  • Type: boolean
module.exports = {
  //...
  experiments: {
    backCompat: true,
  },
};

experiments.buildHttp

활성화되면, webpack은 http(s): 프로토콜로 시작하는 원격 리소스를 빌드할 수 있습니다.

  • Type:

    • (string | RegExp | ((uri: string) => boolean))[]

      experiments.buildHttp.allowedUris의 바로가기입니다.

    • HttpUriOptions

      {
        allowedUris: (string|RegExp|(uri: string) => boolean)[],
        cacheLocation?: false | string,
        frozen?: boolean,
        lockfileLocation?: string,
        upgrade?: boolean
      }
  • 사용 가능: 5.49.0+

  • 예제

    // webpack.config.js
    module.exports = {
      //...
      experiments: {
        buildHttp: true,
      },
    };
    // src/index.js
    import pMap1 from 'https://cdn.skypack.dev/p-map';
    // `buildHttp`가 활성화되면, webpack은 일반 로컬 모듈처럼 pMap1을 빌드합니다.
    console.log(pMap1);

experiments.buildHttp.allowedUris

허용된 URI 목록입니다.

  • Type: (string|RegExp|(uri: string) => boolean)[]

  • Example

    // webpack.config.js
    module.exports = {
      //...
      experiments: {
        buildHttp: {
          allowedUris: [
            'http://localhost:9990/',
            'https://raw.githubusercontent.com/',
          ],
        },
      },
    };

experiments.buildHttp.cacheLocation

원격 리소스를 캐싱할 위치를 정의합니다.

  • Type
    • string
    • false
  • Example
    // webpack.config.js
    module.exports = {
      //...
      experiments: {
        buildHttp: {
          cacheLocation: false,
        },
      },
    };

기본적으로 webpack은 캐싱을 위해 <compiler-name.>webpack.lock.data/를 사용하지만, 값을 false로 설정하여 비활성화할 수 있습니다.

프로덕션 빌드 중에는 네트워크 요청이 이루어지지 않으므로 experiments.buildHttp.cacheLocation 아래의 파일을 버전 제어 시스템에 커밋해야 합니다.

experiments.buildHttp.frozen

원격 리소스 및 잠금 파일을 고정합니다. 잠금 파일 또는 리소스 내용을 수정하면 오류가 발생합니다.

  • Type: boolean

experiments.buildHttp.lockfileLocation

잠금 파일을 저장할 위치를 정의합니다.

  • Type: string

기본적으로 webpack은 <compiler-name.>webpack.lock 파일>을 생성합니다. 프로덕션 빌드 동안 webpack은 잠금 파일에서 http(s): 프로토콜로 시작하는 모듈을 빌드하고 experiments.buildHttp.cacheLocation 아래에 캐시합니다.

experiments.buildHttp.upgrade

원격 리소스의 변경 사항을 감지하고 자동으로 업그레이드합니다.

  • Type: boolean

experiments.cacheUnaffected

변경되지 않은 모듈의 추가 인메모리 캐싱을 활성화하고 변경되지 않은 모듈만 참조합니다.

  • Type: boolean

기본값은 futureDefaults의 값입니다.

experiments.futureDefaults

다음 webpack 메이저 버전의 기본값을 사용하고 문제가 있는 위치에 경고를 표시합니다.

webpack.config.js

module.exports = {
  //...
  experiments: {
    futureDefaults: true,
  },
};

experiments.lazyCompilation

엔트리 포인트와 동적 import는 사용 중일 때만 컴파일하세요. Web 또는 Node.js에 사용할 수 있습니다.

  • Type

    • boolean

    • object

      {
      // 커스텀 백엔드 정의
      backend?: ((
        compiler: Compiler,
        callback: (err?: Error, api?: BackendApi) => void
        ) => void)
        | ((compiler: Compiler) => Promise<BackendApi>)
        | {
          /**
           * 커스텀 클라이언트
          */
          client?: string;
      
          /**
           * 서버에 수신할 위치를 지정합니다.
           */
          listen?: number | ListenOptions | ((server: typeof Server) => void);
      
          /**
           * 클라이언트가 서버에 연결하는 데 사용해야 하는 프로토콜을 지정합니다.
           */
          protocol?: "http" | "https";
      
          /**
           * EventSource 요청을 처리하는 서버를 생성하는 방법을 지정합니다.
           */
          server?: ServerOptionsImport | ServerOptionsHttps | (() => typeof Server);
      
      },
      entries?: boolean,
      imports?: boolean,
      test?: string | RegExp | ((module: Module) => boolean)
      }
      • backend: 백엔드를 커스터마이즈 합니다.
      • entries: 엔트리에 대한 지연 컴파일을 활성화합니다.
      • imports 5.20.0 + : 동적 import에 대해 지연 컴파일을 사용합니다.
      • test 5.20.0+: 어떤 import 모듈을 지연 컴파일할지 지정합니다.
  • Available: 5.17.0+

  • Example 1:

    module.exports = {
      // …
      experiments: {
        lazyCompilation: true,
      },
    };
  • Example 2:

    module.exports = {
      // …
      experiments: {
        lazyCompilation: {
          // 동적 import에 대한 지연 컴파일 비활성화
          imports: false,
    
          // 엔트리에 대한 지연 컴파일 비활성화
          entries: false,
    
          // moduleB를 지연 컴파일하지 마세요
          test: (module) => !/moduleB/.test(module.nameForCondition()),
        },
      },
    };

experiments.outputModule

boolean

활성화되면, webpack은 가능할 때마다 ECMAScript 모듈 구문을 출력합니다. 예를 들어, import()를 사용하여 청크를 로드하면, ESM은 청크 데이터를 노출하기 위해 export 합니다.

module.exports = {
  experiments: {
    outputModule: true,
  },
};

5 Contributors

EugeneHlushkowizardofhogwartschenxsananshumanvsnitin315

Translators