Experiments

experiments

boolean: false

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

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

asyncWebAssembly: 업데이트된 사양에 따라 새로운 웹 어셈블리를 지원하여, 웹 어셈블리 모듈을 비동기 모듈로 만듭니다. 그리고 experiments.futureDefaults가 true로 설정되면 기본적으로 활성화됩니다.
backCompat
buildHttp
cacheUnaffected
css
deferImport
futureDefaults
html
lazyCompilation
outputModule
sourceImport
syncWebAssembly: webpack 4에서와 같이 이전 웹 어셈블리를 지원합니다.
layers: 모듈 및 청크 레이어를 활성화합니다. 5.102.0부터는 제거되어 추가 옵션 없이 동작합니다.
topLevelAwait: 최상위 레벨에서 await를 사용하면 모듈을 async 모듈로 변환합니다. webpack 5.83.0부터는 기본으로 활성화되며, 그 이전 버전에서는 experiments.topLevelAwait를 true로 설정해 활성화할 수 있습니다. 5.102.0부터는 제거되어 추가 옵션 없이 동작합니다.

webpack.config.js

export default {
  // ...
  experiments: {
    asyncWebAssembly: true,
    buildHttp: true,
    lazyCompilation: true,
    outputModule: true,
    sourceImport: true,
    syncWebAssembly: true,
    topLevelAwait: true,
  },
};

experiments.backCompat

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

Type: boolean

export default {
  // ...
  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

export default {
  // ...
  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

export default {
  // ...
  experiments: {
    buildHttp: {
      allowedUris: [
        "http://localhost:9990/",
        "https://raw.githubusercontent.com/",
      ],
    },
  },
};

experiments.buildHttp.cacheLocation

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

Type
- string
- false

Example

webpack.config.js

export default {
  // ...
  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.103.0+

Webpack은 CSS Modules의 composes 속성을 기본적으로 지원하므로 동일한 파일, 다른 CSS 모듈 또는 전역 클래스의 클래스를 조합할 수 있습니다.

/* styles.module.css */
.base {
  color: blue;
}

.button {
  composes: base;
  padding: 10px;
}

.primary {
  composes: button;
  background: blue;
}

/* 다른 CSS module에서 조합 */
.composed {
  composes: className from "./other.module.css";
}

/* 전역 class에서 조합 */
.globalComposed {
  composes: global-class from global;
}

5.87.0+ Style-specific fields resolution in package.json files: 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 파일에 대한 변경 사항이 전체 페이지를 다시 로드하지 않고 브라우저에 반영된다는 것을 의미합니다.
5.107.0+ CSS Modules에 대한 Scope hoisting (module concatenation)을 지원합니다. optimization.concatenateModules 가 활성화되면 exportType이 text, css-style-sheet, style, link 인 CSS Modules는 각각 별도의 runtime 인스턴스로 유지되지 않고 하나의 module 인스턴스로 concatenation 됩니다. 이렇게 하면 오버헤드를 줄이고 CSS 비중이 큰 번들에서 더 작은 출력물을 만들 수 있습니다.
5.107.0+ @value 식별자는 @import의 path 인자와 url() 참조 내부에서 사용할 수 있으므로, 공통 path와 asset을 한 번만 정의하고 여러 stylesheet에서 재사용할 수 있습니다. 따옴표가 있는 형식 ("./x", './x')과 없는 형식(./x) 모두 허용되며, webpack의 일반적인 asset pipeline을 통해 resolve됩니다.
```
@value path: "./other.module.css";
@import path;

@value bg: "./image.png";

.a {
  background: url(bg);
}
```

experiments.cacheUnaffected

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

Type: boolean

기본값은 futureDefaults의 값입니다.

experiments.deferImport

tc39 제안import defer 제안 지원을 활성화합니다. 이 기능을 사용하면 모듈의 평가를 처음 사용할 때까지 연기할 수 있습니다. import()의 비동기적 특성으로 인해 사용할 수 없는 경우 코드 실행을 동기적으로 연기하는 데 유용합니다.

Type: boolean

이 기능을 사용하려면 런타임 환경에서 Proxy(ES6) 지원이 필요합니다.

다음 구문을 활성화합니다.

import defer * as module from "module-name";
import * as module2 from /* webpackDefer: true */ "module-name2";

// 또는 동적 import 사용
import.defer("module-name3");
import(/* webpackDefer: true */ "module-name4");

export function f() {
  // module-name을 동기적으로 평가한 후 doSomething()을 호출합니다.
  module.doSomething();
}

Limitations of magic comments (`/* webpackDefer: true */`)

매직 주석을 from 키워드 뒤에 넣는 것이 좋습니다. 다른 위치에도 작동할 수 있지만 테스트되지 않았습니다.

매직 주석을 import 키워드 뒤에 넣는 것은 파일 시스템 캐시와 호환되지 않습니다.

experiments.sourceImport

5.106.0+

Source Phase Imports tc39 제안에 대한 지원을 활성화합니다.

이 제안은 모듈을 즉시 평가하는 대신 source phase 에서 import할 수 있는 방법을 도입합니다. webpack에서 이 실험적 지원은 현재 WebAssembly modules에 대해 구현되어 있습니다. 먼저 컴파일된 WebAssembly.Module을 얻고, 이후 원하는 imports와 함께 직접 instantiate할 수 있습니다. JavaScript source imports 지원은 향후 릴리스에서 추가될 예정입니다.

Type: boolean

asyncWebAssembly와 함께 활성화하세요.

// webpack.config.js
export default {
  // ...
  experiments: {
    asyncWebAssembly: true,
    sourceImport: true,
  },
};

그런 다음 .wasm import와 함께 static 또는 dynamic source-phase 문법을 사용할 수 있습니다.

// 정적 형식
import source wasmModule from "./module.wasm";

// 동적 형식
const wasmModule2 = await import.source("./module.wasm");

const instance = await WebAssembly.instantiate(wasmModule);

전체 예제는 webpack 저장소의 examples/wasm-simple-source-phase에서 확인할 수 있습니다.

import /* webpackDefer: true */ * as ns from "..."; // 알려진 문제
import * as ns from /* webpackDefer: true */ "..."; // 권장

로더가 매직 주석을 제거하지 않도록 해야 합니다.

TypeScript, Babel, SWC 및 Flow.js는 매직 주석을 보존하도록 구성할 수 있습니다.

Esbuild는 이 기능과 호환되지 않습니다(evanw/esbuild#1439 및 evanw/esbuild#309 참조). 하지만 향후 지원될 수 있습니다.

5.105.0+

import.defer()가 이제 ContextModule에서 지원됩니다(가져오기 경로는 동적 표현식입니다). 예제는 지연 로딩 가이드를 참조하세요.

experiments.futureDefaults

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

webpack.config.js

export default {
  // ...
  experiments: {
    futureDefaults: true,
  },
};

experiments.html

5.107.0+

네이티브 HTML module 지원을 활성화합니다. JavaScript에서 .html 파일을 import하면 그 안의 tag 참조가 일반 webpack pipeline을 거치며, 오랫동안 html-loader가 맡아 왔던 역할을 대체합니다. 이 flag는 NormalModuleFactory에 html module type을 등록하고 아래에 설명된 HTML 동작을 활성화합니다.

Type: boolean
Default: false

webpack.config.js

export default {
  // ...
  experiments: {
    html: true,
  },
};

그다음 JavaScript에서 HTML 파일을 import합니다. default export는 처리된 HTML 문자열이며, 모든 asset 참조는 webpack을 통해 resolve됩니다.

// src/index.js
import page from "./page.html";

document.documentElement.innerHTML = page;

Inline `<style>` tags

HTML module 내부의 inline <style> block은 exportType: "text"를 사용하는 가상 CSS module로서 webpack의 CSS pipeline을 거칩니다. url()과 @import 참조는 HTML 파일을 기준으로 resolve되며, 처리된 CSS 텍스트는 생성된 HTML 문자열의 원래 <style> tag 안에 다시 기록됩니다.

<!-- src/page.html -->
<!doctype html>
<html>
  <head>
    <style>
      @import "./reset.css";

      body {
        background: url("./bg.png");
      }
    </style>
  </head>
  <body>
    ...
  </body>
</html>

<style type="text/css">와 type attribute가 없는 <style>은 처리됩니다. CSS가 아닌 type을 가진 경우에는 변경 없이 그대로 통과합니다.

Inline `<script>` tags

Inline <script> 본문은 <script src>에 사용되는 것과 동일한 entry pipeline을 거칩니다. 각 <script> 본문은 자체 webpack entry가 됩니다. classic inline script는 CommonJS로 번들되고, <script type="module"> 본문은 ESM으로 번들됩니다. 생성된 HTML에서 해당 tag는 생성된 chunk를 가리키는 <script src="…">로 다시 작성되며, 본문은 비워집니다.

<!-- src/page.html -->
<!doctype html>
<html>
  <body>
    <script type="module">
      import { greet } from "./lib.js";
      greet("world");
    </script>

    <script>
      console.log("classic inline script");
    </script>
  </body>
</html>

외부 <script src>에 적용되는 것과 같은 동작이 여기에도 적용됩니다.

output.module이 활성화되면 classic inline <script> tag는 <script src>와 동일하게 자동으로 type="module"로 업그레이드됩니다.
webpackIgnore는 inline <script> tag에도 동작하며, 이 경우 원래 본문은 변경되지 않습니다.
application/ld+json, importmap 같은 non-JS type 값은 변경 없이 그대로 통과합니다.

`<script src>` and `<link rel="modulepreload">`

HTML module 내부의 <script src> 및 <link rel="modulepreload"> 참조는 실제 webpack entry가 됩니다. 생성된 chunk URL은 다시 HTML 문자열에 기록되므로, hashed filename도 JavaScript import에서와 동일하게 동작합니다.

<!-- src/page.html -->
<!doctype html>
<html>
  <head>
    <link rel="modulepreload" href="./preloaded.js" />
  </head>
  <body>
    <script src="./entry.js"></script>
    <script src="./second.js"></script>
  </body>
</html>

다음 동작을 알아두면 좋습니다.

같은 페이지의 여러 <script src> tag는 하나의 runtime을 공유합니다. 각 그룹(classic 또는 type="module") 내에서 선두 script가 runtime을 보유하고, 나머지는 여기에 dependOn을 선언합니다.
<link rel="modulepreload"> entry는 독립적으로 유지되며 형제 script에서 import되지 않습니다. 따라서 "preload without execute" 의미가 유지됩니다.
output.module이 활성화되면 classic <script src> tag는 <script type="module" src>로 자동 업그레이드되어, 생성된 ES-module chunk가 올바른 mode로 로드됩니다.
Non-JS script type(application/ld+json, importmap, …)과 data URI는 변경 없이 그대로 전달되며 JS로 번들되지 않습니다.

`webpackIgnore` magic comment

HTML  comment를 tag 바로 앞에 두면 webpack은 해당 tag의 src, href, srcset 및 유사한 attribute에 대한 URL resolve를 건너뜁니다. 자세한 설명은 magic comments를 참고하세요.

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:

export default {
  // …
  experiments: {
    lazyCompilation: true,
  },
};

Example 2:

export default {
  // …
  experiments: {
    lazyCompilation: {
      // 동적 import에 대한 지연 컴파일 비활성화
      imports: false,

      // 엔트리에 대한 지연 컴파일 비활성화
      entries: false,

      // moduleB를 지연 컴파일하지 마세요
      test: (module) => !/moduleB/.test(module.nameForCondition()),
    },
  },
};

experiments.outputModule

boolean

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

export default {
  experiments: {
    outputModule: true,
  },
};

Edit this page·

« Previous

Stats

InfrastructureLogging

6 Contributors

Translators

choilim

Experiments

experiments

experiments.backCompat

experiments.buildHttp

experiments.buildHttp.allowedUris

experiments.buildHttp.cacheLocation

experiments.buildHttp.frozen

experiments.buildHttp.lockfileLocation

experiments.buildHttp.proxy

experiments.buildHttp.upgrade

experiments.css

experiments.cacheUnaffected

experiments.deferImport

Limitations of magic comments (/* webpackDefer: true */)

experiments.sourceImport

experiments.futureDefaults

experiments.html

Inline <style> tags

Inline <script> tags

<script src> and <link rel="modulepreload">

webpackIgnore magic comment

experiments.lazyCompilation

experiments.outputModule

6 Contributors

Translators

Limitations of magic comments (`/* webpackDefer: true */`)

Inline `<style>` tags

Inline `<script>` tags

`<script src>` and `<link rel="modulepreload">`

`webpackIgnore` magic comment