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.proxy

원격 리소스를 가져오는 데 사용할 프록시 서버를 지정합니다.

  • Type: string

기본적으로 webpack은 http_proxy(대소문자 구분 안함) 환경 변수에서 원격 리소스를 가져오는 데 사용할 프록시 서버를 지정합니다. 하지만 proxy 옵션을 통해 지정할 수도 있습니다.

experiments.buildHttp.upgrade

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

  • Type: boolean

experiments.css

네이티브 CSS 지원을 활성화합니다. 아직 개발 중인 실험적인 기능이고 webpack v6에서 기본적으로 활성화될 예정이지만, GitHub에서 진행 상황을 확인할 수 있습니다.

  • Type:

    • boolean

    • CssExperimentOptions

      {
        exportsOnly?: boolean;
      }

실험적 기능:

  • CSS 모듈 지원: webpack은 각 CSS 클래스에 대해 고유한 이름을 생성합니다. CSS 모듈에는 .module.css 확장자를 사용하세요.

  • 5.87.0+ package.json 파일의 스타일별 필드 해석 webpack은 package.json 파일에서 style 필드를 찾고 CSS 파일 내부에 import를 위해 존재하는 경우 이 파일을 사용합니다.

    예를 들어 CSS 파일에 @import 'bootstrap';을 추가하면 webpack은 node_modules에서 bootstrap을 찾고 거기에서 package.jsonstyle 필드를 사용합니다. style 필드가 없으면 webpack은 이전 버전과의 호환성을 유지하기 위해 main 필드를 대신 사용합니다.

  • CSS 파일에 대한 콘텐츠 해시: webpack은 CSS 파일에 대한 콘텐츠 해시를 생성하고 파일 이름에 사용합니다. 이는 장기 캐싱에 유용합니다.

  • CSS 추출: webpack은 CSS를 별도의 파일로 추출합니다. 이 기능은 네이티브 지원을 제공하기 때문에 mini-css-extract-plugincss-loader의 필요성을 대체합니다.

  • CSS import: webpack은 CSS import를 생성된 CSS 파일로 인라인합니다.

  • Hot Module Reload (HMR): webpack은 CSS 파일용 HMR을 지원합니다. 이는 CSS 파일에 대한 변경 사항이 전체 페이지를 다시 로드하지 않고 브라우저에 반영된다는 것을 의미합니다.

experiments.css.exportsOnly

스타일시트 생성 및 로드를 막고 css에서 output JavaScript 파일로의 내보내기만 포함합니다.

  • 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: Server) => void);
      
          /**
           * 클라이언트가 서버에 연결하는 데 사용해야 하는 프로토콜을 지정합니다.
           */
          protocol?: "http" | "https";
      
          /**
           * EventSource 요청을 처리하는 서버를 생성하는 방법을 지정합니다.
           */
          server?: ServerOptionsImport | ServerOptionsHttps | (() => 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,
  },
};

experiments.topLevelAwait

boolean = true

topLevelAwait 옵션은 await가 최상위 수준에서 사용될 때 모듈을 async 모듈로 변환합니다. Webpack 버전 5.83.0부터는 이 기능이 기본적으로 활성화됩니다. 그러나 그 이전 버전에서는 'experiments.topLevelAwait'를 'true'로 설정하여 활성화할 수 있습니다.

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

6 Contributors

EugeneHlushkowizardofhogwartschenxsananshumanvsnitin315burhanuday

Translators