ag-grid is proud to partner with webpack

Experiments

experiments

boolean: false

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

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

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

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

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

Edit this page·Print this page

« Previous

Stats

Other Options

5 Contributors

Translators

choilim