Experiments

experiments

boolean: false

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

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

• asyncWebAssembly: 업데이트된 사양에 따라 새로운 웹 어셈블리를 지원하여, 웹 어셈블리 모듈을 비동기 모듈로 만듭니다. 그리고 experiments.futureDefaults가 true로 설정되면 기본적으로 활성화됩니다.
• backCompat
• buildHttp
• cacheUnaffected
• css
• deferImport
• futureDefaults
• html
• lazyCompilation
• outputModule
• typescript
• 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

    Copy

    {
      allowedUris: (string|RegExp|(uri: string) => boolean)[],
      cacheLocation?: false | string,
      frozen?: boolean,
      lockfileLocation?: string,
      upgrade?: boolean
    }

• 사용 가능: 5.49.0+

• 예제

  webpack.config.js

  Copy

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

  Copy

  // 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

  Copy

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

experiments.buildHttp.cacheLocation

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

• Type

  • string
  • false

• Example

  webpack.config.js

  Copy

  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 모듈 또는 전역 클래스의 클래스를 조합할 수 있습니다.

  Copy

  /* 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됩니다.

  Copy

  @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

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 참조). 하지만 향후 지원될 수 있습니다.

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

experiments.futureDefaults

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

webpack.config.js

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

experiments.html

네이티브 HTML module 지원을 활성화합니다. JavaScript에서 .html 파일을 import하면 ê·¸ 안의 태그 참조가 일반 webpack pipeline을 거치며, 오랫동안 html-loader가 맡아 왔던 역할을 대체합니다. 이 플래그는 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을 통해 해석됩니다.

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

document.documentElement.innerHTML = page;

Inline <style> tags

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

<!-- 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

인라인 <script> 본문은 <script src>에 사용되는 것과 동일한 entry pipeline을 거칩니다. 각 <script> 본문은 자체 webpack entry가 됩니다. 일반적인 인라인 script는 CommonJS로 번들되고, <script type="module"> 본문은 ESM으로 번들됩니다. 생성된 HTML에서 해당 태그는 생성된 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이 활성화되면 일반적인 인라인 <script> 태그는 <script src>와 동일하게 자동으로 type="module"로 업그레이드됩니다.
• webpackIgnore는 인라인 <script> 태그에도 동작하며, 이 경우 원래 본문은 변경되지 않습니다.
• 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 문자열에 기록되므로, 해시된 파일 이름도 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> 태그는 하나의 runtime을 공유합니다. 각 그룹(일반 script 또는 type="module") 내에서 선두 script가 runtime을 보유하고, 나머지는 여기에 dependOn을 선언합니다.
• <link rel="modulepreload"> entry는 독립적으로 유지되며 형제 script에서 import되지 않습니다. 따라서 "실행 없이 preload" 의미가 유지됩니다.
• output.module이 활성화되면 일반적인 <script src> 태그는 <script type="module" src>로 자동 업그레이드되어, 생성된 ES-module chunk가 올바른 모드로 로드됩니다.
• Non-JS script type(application/ld+json, importmap, …)ê³¼ data URI는 변경 없이 그대로 전달되며 JS로 번들되지 않습니다.

webpackIgnore magic comment

HTML <!-- webpackIgnore: true --> comment를 태그 바로 앞에 두면 webpack은 해당 태그의 src, href, srcset 및 유사한 attribute에 대한 URL 해석을 건너뜁니다. 자세한 설명은 magic comments를 참고하세요.

experiments.lazyCompilation

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

• Type

  • boolean

  • object

    Copy

    {
      // 커스텀 백엔드 정의
      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:

  Copy

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

• Example 2:

  Copy

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

experiments.typescript

네이티브 TypeScript 지원을 활성화합니다. 이 플래그를 켜면 webpack은 .ts, .cts, .mts 파일(그리고 해당하는 data:text/typescript, data:application/typescript data URI)들을 외부 loader 없이 직접 컴파일합니다. 내부적으로는 Node.js의 내장 module.stripTypeScriptTypes를 호출합니다.

• Type: boolean
• Default: false (auto-enabled by experiments.futureDefaults)

export default {
  experiments: {
    typescript: true,
  },
  entry: "./src/index.ts",
};

이 플래그를 활성화하면 몇 가지 합리적인 기본값도 함께 연결됩니다. .ts / .cts / .mts용 기본 rules, .js보다 앞서 .ts를 extension resolution에 추가하는 동작, import "./foo.js"가 ./foo.ts도 시도하도록 하는 extensionAlias(.cjs / .mjs → .cts / .mts 포함), tsconfig.json resolution, 그리고 모노레포 패키지가 package.json#exports를 통해 .ts 소스를 배포할 수 있게 하는 "typescript" conditional-exports key가 포함됩니다.

type checking이 필요하다면 이 플래그를 tsc --noEmit 또는 fork-ts-checker-webpack-pluginê³¼ 함께 사용하세요. JSX나 지워질 수 없는 TypeScript 문법을 사용한다면 계속 ts-loader나 swc-loader를 사용해야 합니다.

webpack 저장소에는 두 가지 참고 예제가 포함되어 있습니다.

• examples/typescript: 내장 experiments.typescript 설정 예제
• examples/typescript-non-erasable: 지워질 수 없는 문법이 필요할 때의 ts-loader fallback 예제