Datagrid and Charting for Enterprise Applications

Experiments

experiments

boolean: false

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

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

asyncWebAssembly: 업데이트된 사양에 따라 새로운 웹 어셈블리를 지원하여, 웹 어셈블리 모듈을 비동기 모듈로 만듭니다. 그리고 experiments.futureDefaults가 true로 설정되면 기본적으로 활성화됩니다.
backCompat
buildHttp
cacheUnaffected
css
futureDefaults
layers: 모듈 및 청크 레이어를 활성화합니다.
lazyCompilation
outputModule
syncWebAssembly: webpack 4에서와 같이 이전 웹 어셈블리를 지원합니다.
topLevelAwait

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

실험적 기능:

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.json의 style 필드를 사용합니다. style 필드가 없으면 webpack은 이전 버전과의 호환성을 유지하기 위해 main 필드를 대신 사용합니다.
CSS 파일에 대한 콘텐츠 해시: webpack은 CSS 파일에 대한 콘텐츠 해시를 생성하고 파일 이름에 사용합니다. 이는 장기 캐싱에 유용합니다.
CSS 추출: webpack은 CSS를 별도의 파일로 추출합니다. 이 기능은 네이티브 지원을 제공하기 때문에 mini-css-extract-plugin 및 css-loader의 필요성을 대체합니다.
CSS import: webpack은 CSS import를 생성된 CSS 파일로 인라인합니다.
Hot Module Reload (HMR): webpack은 CSS 파일용 HMR을 지원합니다. 이는 CSS 파일에 대한 변경 사항이 전체 페이지를 다시 로드하지 않고 브라우저에 반영된다는 것을 의미합니다.

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,
  },
};

Edit this page·Print this page

« Previous

Stats

InfrastructureLogging

6 Contributors

Translators

choilim