ag gridwebpack
ag-grid is proud to partner with webpack

Webpack 5 release (2020-10-10)

Webpack 4는 2018년 2월에 릴리스했습니다. 2018년 2월 이후로 큰 변화 없이 많은 기능을 릴리스했습니다. 여러 사람이 큰 변화가 있는 주요 변경사항을 싫어한다는 것을 알고 있습니다. 특히 webpack의 경우, 일반적으로 1년에 2번만 사용하고 남은 시간 동안 "단지 작동"만 합니다. 그러나 큰 변화가 없는 제공된 기능에도 비용이 발생합니다. 따라서 주요 API 또는 구조적 개선을 할 수 없습니다.

그래서 가끔 어려운 파일이 쌓이고 모든 것을 엉망으로 만들지 않기 위해 큰 변화를 해야 하는 시점이 있습니다. 큰 변화가 필요한 시점이 새 주요 버전이 필요한 시점입니다. 따라서 webpack 5는 구조적 개선과 구조적 개선 없이는 구현이 가능하지 않은 특징을 포함합니다.

주요 버전은 또한 일부 기본값을 수정하고 그동안 나오는 제안과 사양을 일치시킬 수 있는 기회였습니다.

그래서 오늘(2020-10-10) webpack 5.0.0이 릴리스했지만, 버그가 없거나 기능이 완전하다는 것을 의미하지는 않습니다. Webpack 4와 마찬가지로 문제를 수정하고 기능을 추가하여 개발을 계속합니다. 다음 날에는 아마도 많은 버그 수정이 있을 것입니다. 기능은 나중에 제공합니다.

Common Questions

So what does the release mean?

릴리스는 주요 변경 작업이 완료했다는 것을 의미합니다. 아키텍처를 업그레이드하고 향후 기능(및 현재 기능)을 위한 좋은 기반을 만들기 위해 많은 리팩토링이 수행되었습니다.

So when is the time to upgrade?

때에 따라 다릅니다. 업그레이드가 실패할 가능성이 높으며 두 번째 또는 세 번째 시도를 해야 합니다. 그래도 상관없다면, 지금 업그레이드를 시도하고 webpack, 플러그인과 로더에 피드백을 제공해 주세요. 업그레이드가 실패하는 문제를 해결하기 위해 열심히 하고 있습니다. 누군가는 시작해야 하고 당신이 문제를 해결하는 것으로부터 혜택을 받는 첫 번째 사람 중 하나가 될 것입니다.

Sponsoring Update

Webpack은 전적으로 후원을 기반으로 합니다. 다른 오픈소스 프로젝트와 같이 대기업이 후원하거나 대기업에 연결되어 있지 않습니다. 후원 수익의 99%는 기여도에 따라 컨트리뷰터와 메인테이너에게 분배됩니다. Webpack을 개선하기 위해 돈을 투자한다고 믿습니다.

그러나 팬데믹이 있고 나서 여러 기업은 더 이상 후원에 개방적이지 않습니다. Webpack도 이러한 상황에서 (많은 다른 회사 및 여러 사람과 마찬가지로) 어려움을 겪고 있습니다.

컨트리뷰터에게 적절한 금액을 지불할 수 없었지만 지금은 사용할 수 있는 돈이 절반밖에 없기 때문에 더 많은 삭감이 필요합니다. 상황이 개선될 때까지 매월 첫 10일 동안만 컨트리뷰터와 메인테이너에게만 비용을 드립니다. 나머지 날은 자발적으로 일하거나, 고용주가 지불하거나, 다른 일을 하거나, 며칠을 쉴 수 있습니다. 이를 통해 처음 10일 동안 일에 투자한 시간과 동등하게 비용을 드릴 수 있습니다.

가장 큰 "감사 합니다"는 지난 3년 동안 엄청난 금액으로 webpack을 후원해 온 trivago에게 돌아갑니다. 안타깝게도 trivago는 올해 코로나19로 인해 후원을 이어가지 못하고 있습니다. 다른 회사가 나서서 이 거대한 발자취를 따르기를 바랍니다.

모든 후원자에 감사드립니다.

General direction

이 릴리스는 다음 항목에 중점을 둡니다.

  • 영구 캐싱으로 빌드 성능을 향상시킵니다.
  • 더 나은 알고리즘과 기본값으로 장기 캐싱을 개선합니다.
  • 더 나은 트리 쉐이킹 및 코드 생성으로 번들 크기를 개선합니다.
  • 웹 플랫폼과의 호환성을 향상시킵니다.
  • v4에서 주요 변경 사항을 도입하지 않고 기능을 구현하는 동안 이상한 상태로 남아 있던 내부 구조를 정리합니다.
  • 가능한 오랫동안 v5를 유지할 수 있도록 지금 주요 변경 사항을 도입하여 향후 기능을 준비하세요.

Migration Guide

마이그레이션 가이드는 여기를 참고하세요

Major Changes: Removals

Removed Deprecated Items

v4에서 더 이상 지원되지 않는 모든 항목이 제거되었습니다.

마이그레이션: webpack 4 빌드가 지원 중단 경고를 인쇄하지 않는지 확인하세요.

다음은 v4에서 제거되었지만 지원 중단 경고가 없는 몇 가지 사항입니다.

  • IgnorePlugin과 BannerPlugin은 이제 객체, 문자열 또는 함수가 될 수 있는 하나의 인수만 전달해야 합니다.

Deprecation codes

새로운 지원 중단에는 더 쉽게 참조할 수 있도록 지원 중단 코드가 포함됩니다.

Syntax deprecated

require.include는 더 이상 지원되지 않으며 사용 시 기본적으로 경고를 표시합니다.

Rule.parser.requireInclude를 사용하여 동작을 허용, 지원 중단, 또는 비활성화로 변경할 수 있습니다.

Automatic Node.js Polyfills Removed

초기에 webpack의 목표는 브라우저에서 대부분의 Node.js 모듈을 실행할 수 있도록 하는 것이었지만 모듈 환경이 바뀌었고 많은 모듈 사용이 이제 주로 프런트엔드 목적으로 작성되었습니다. v4 이하 webpack은 수많은 Node.js 코어 모듈에 대한 폴리필과 함께 제공하며, 모듈이 코어 모듈(즉 crypto 모듈)을 사용하면 자동으로 적용됩니다.

폴리필과 함께 제공하면 Node.js 용으로 작성된 모듈을 더 쉽게 사용할 수 있지만 거대한 폴리필이 번들에 추가됩니다. 많은 경우 폴리필은 필요하지 않습니다.

Webpack 5는 코어 모듈을 자동으로 폴리필하는 것을 중지하고 프런트엔드 호환 모듈에 중점을 둡니다. 목표는 Node.js 코어 모듈을 사용할 수 없는 웹 플랫폼과의 호환성을 개선하는 것입니다.

마이그레이션:

  • 가능한 프런트엔드 호환 모듈을 사용하세요.
  • Node.js 코어 모듈에 대한 폴리필을 수동으로 추가할 수 있습니다. 오류 메세지는 수동으로 추가하는 방법에 대한 힌트를 제공합니다.
  • 패키지 작성자: package.json의 browser필드를 사용하여 패키지 프런트엔드와 호환되도록 합니다. 브라우저에 대한 대체 구현/의존성을 제공합니다.

Major Changes: Long Term Caching

Deterministic Chunk, Module IDs and Export names

장기 캐싱을 위해 새로운 알고리즘을 추가했습니다. 프로덕션 모드에서는 기본적으로 활성화되어 있습니다.

chunkIds: "deterministic" moduleIds: "deterministic" mangleExports: "deterministic"

알고리즘은 모듈과 청크에 짧은(3 또는 5자리)숫자 ID를 할당하고 결정성 방식으로 export에 짧은(2 characters)이름을 할당합니다. 번들 크기와 장기 캐싱 중 선택해야 합니다.

moduleIds/chunkIds/mangleExports: false는 기본 동작을 비활성화하고 플러그인을 통해 커스텀 알고리즘을 제공할 수 있습니다. moduleIds/chunkIds: false는 빌드가 작동하는 결과를 가져오는 반면, webpack 5에서는 커스텀 플러그인을 제공해야 합니다.

마이그레이션: chunkIds, moduleIds및 mangleExports의 기본값을 사용하는 것이 가장 좋습니다. 이전 기본값인 chunkIds: "size", moduleIds: "size", mangleExports: "size"를 사용할 수도 있습니다. 이전 기본값을 사용하면 더 작은 번들이 생성되지만 캐싱을 위해 더 자주 무효화됩니다.

참고: webpack 4에서 해시된 모듈 ID는 gzip 성능을 감소시켰습니다. 이는 변경된 모듈 순서와 관련되었고, 수정되었습니다.

참고: webpack 5에서 deterministicID는 기본적으로 프로덕션 모드에서 활성화됩니다.

Real Content Hash

Webpack 5는 이제 [contenthash]를 사용할 때 파일 콘텐츠의 실제 해시를 사용합니다. 그전에는 "오직"내부 구조의 해시를 사용했습니다. 실제 해시를 사용하는 것은 주석만 변경되거나 변수 이름이 변경된 경우 장기 캐싱에 긍정적인 영향을 미칠 수 있습니다. 이러한 변경 사항은 최소화 한 후에는 표시되지 않습니다.

Major Changes: Development Support

Named Chunk IDs

개발 모드에서 기본적으로 활성화된 새로운 명명된 청크 ID 알고리즘은 청크(및 파일 이름)에 사람이 읽을 수 있는 이름을 제공합니다. 모듈 ID는 context에 상대적인 경로에 따라 결정됩니다. 청크 ID는 청크에 콘텐츠에 따라 결정됩니다.

따라서 더 이상 디버깅을 위해 import(/* webpackChunkName: "name" */ "module")을 사용할 필요가 없습니다. 그러나 프로덕션 환경의 파일 이름을 제어하려는 경우 의미가 있습니다.

프로덕션에서 chunkIds: "named"를 사용할 수 있지만 실수로 모듈 이름에 대한 민감한 정보를 나타내지 않도록 하세요.

마이그레이션: 개발 중에 변경된 파일 이름이 마음에 들지 않으면 chunkIds: "natural"를 전달하여 이전 숫자 모드를 사용할 수 있습니다.

Module Federation

Webpack 5에는 "Module Federation"이라는 새로운 기능이 추가되어 webpack 빌드가 함께 작동할 수 있습니다. 런타임 관점에서 여러 빌드의 모듈은 연결된 거대한 모듈 그래프처럼 작동합니다. 개발자 관점에서 모듈은 지정된 원격 빌드에서 가져와 최소한의 제한으로 사용할 수 있습니다.

자세한 내용은 별도 가이드를 참고하세요.

Major Changes: New Web Platform Features

JSON modules

JSON 모듈은 이제 제안과 일치하고 기본이 아닌 export가 사용되는 경우 경고를 내보냅니다. 엄격한 ECMAScript 모듈에서 가져올 때 JSON 모듈에 더 이상 명명된 export가 없습니다.

마이그레이션: 기본 export를 사용합니다.

기본 export를 사용하는 경우에도 optimization.usedExports 최적화에 의해 사용되지 않은 속성이 삭제되고 optimization.mangleExports 최적화에 의해 속성이 맹글링됩니다.

Rule.parser.parse에 커스텀 JSON 파서를 지정하여 JSON과 유사한 파일(예: toml, yaml, json5 등)을 가져올 수 있습니다.

import.meta

  • import.meta.webpackHot은 엄격한 ESM에서도 사용할 수 있는 module.hot의 별칭입니다.
  • import.meta.webpack은 webpack의 주요 버전을 숫자로 나타냅니다.
  • import.meta.url은 file: 현재 파일의 URL 입니다(__filename 과 유사하지만 파일 URL로 사용).

Asset modules

Webpack 5는 이제 애셋을 나타내는 모듈을 기본적으로 지원합니다. 애셋을 나타니는 모듈은 파일을 출력 폴더로 내보내거나 DataURI를 자바스크립트 번들에 삽입합니다. 어느 쪽이든 작업할 URL을 제공합니다.

여러 가지 방법으로 사용할 수 있습니다.

  • import url from "./image.png"과 같은 import를 일치시킬 때 module.rules에서 type: "asset"을 설정합니다(옛날 방식).
  • new URL("./image.png", import.meta.url)(새로운 방식)

"새로운 방식" 구문은 번들러 없이도 코드를 실행할 수 있도록 결정되었습니다. 이 구문은 브라우저의 네이티브 ECMAScript 모듈에서도 사용할 수 있습니다.

Native Worker support

애셋에 대한 new URL을 new Worker/new SharedWorker/navigator.serviceWorker.register와 결합하면 webpack이 웹 worker를 위한 새 엔트리 포인트를 자동으로 생성합니다.

new Worker(new URL("./worker.js", import.meta.url))

번들러 없이도 코드를 실행할 수 있도록 구문이 결정되었습니다. 이 구문은 브라우저의 네이티브 ECMAScript 모듈에서도 사용할 수 있습니다.

URIs

Webpack 5는 요청에서 프로토콜 처리를 지원합니다.

  • data:가 지원됩니다. Base64 또는 raw 인코딩이 지원됩니다. MIME타입은 module.rules의 로더 및 모듈 유형에 매핑할 수 있습니다. 예시: import x from "data:text/javascript,export default 42"
  • file:이 지원됩니다.
  • http(s):가 지원되지만 new webpack.experiments.schemesHttp(s)UriPlugin()을 통한 옵트인이 필요합니다.
    • 기본적으로 "웹"을 타겟으로 하는 경우 이러한 URI는 external 리소스에 대한 요청을 발생시킵니다.

요청의 프래그먼트가 지원됩니다. 예시: ./file.js#fragment

Async modules

Webpack 5는 소위 "비동기 모듈"을 지원합니다. 이는 동기적으로 평가되지 않지만 대신 비동기 및 Promise 기반 모듈입니다.

import를 통한 가져오기는 자동으로 처리되고 추가 구문이 필요하지 않으며 차이점을 거의 알아차릴 수 없습니다.

require()를 통해 가져오면 export로 해결되는 promise가 리턴됩니다.

Webpack에는 비동기 모듈을 사용하는 여러 가지 방법이 있습니다.

  • 비동기 external
  • 새로운 사양의 WebAssembly 모듈
  • 최상위 수준 대기를 사용하는 ECMAScript 모듈

Externals

Webpack 5는 더 많은 애플리케이션을 포함하기 위해 추가 external 유형을 추가합니다.

promise: promise로 평가되는 표현식입니다. External 모듈은 비동기 모듈이며 해석된 값은 모듈 export로 사용됩니다.

import: 네이티브 import()는 지정된 요청을 로드하는 데 사용됩니다. External 모듈은 비동기 모듈입니다.

module: 아직 구현되지 않았지만 import x from "..."을 통해 모듈을 로드할 계획입니다.

script: <script> 태그를 통해 URL을 로드하고 전역 변수(및 선택적으로 전역 변수의 속성)에서 export를 가져옵니다. External 모듈은 비동기 모듈입니다.

Major Changes: New Node.js Ecosystem Features

Resolving

이제 package.json의 exports와 imports 필드가 지원됩니다.

Yarn PnP는 기본적으로 지원됩니다.

자세한 내용은 패키지 export를 참고하세요.

Major Changes: Development Experience

Improved target

Webpack 5는 타겟 리스트를 전달할 수 있으며 타겟 버전도 지원합니다.

예: target: "node14" target: ["web", "es2020"]

타겟 버전 지원을 통해 webpack이 결정하는 데 필요한 모든 정보를 제공할 수 있습니다.

  • 청크 로딩 메커니즘 및
  • 화살표 함수와 같은 지원되는 구문

Stats

통계 테스트 형식이 가독성 및 자세한 내용과 관련하여 개선되었습니다. 기본값은 덜 장황하고 대규모 빌드에도 적합하도록 개선되었습니다.

  • 청크 관계는 이제 기본적으로 숨겨집니다. 이것은 stats.chunkRelations로 토글할 수 있습니다.
  • 통계는 이제 files와 auxiliaryFiles를 구분합니다.
  • 통계는 이제 기본적으로 모듈 및 청크 ID를 숨깁니다. 이것은 stats.ids로 토글할 수 있습니다.
  • 이제 모든 모듈의 리스트는 엔트리 포인트까지의 거리별로 정렬됩니다. 이것은 stats.modulesSort로 변경할 수 있습니다.
  • 이제 청크 모듈 리스트는 모듈 이름으로 정렬됩니다. 이것은 stats.chunkModulesSort로 변경할 수 있습니다.
  • 연결된 모듈의 중첩 모듈 리스트는 이제 토폴로지로 정렬됩니다. 이것은 stats.nestedModulesSort로 변경할 수 있습니다.
  • 청크 및 애셋에 청크 ID 힌트가 표시됩니다.
  • 애셋 및 모듈은 리스트/테이블 대신 트리에 표시됩니다.
  • 일반 정보는 이제 마지막에 요약으로 표시됩니다. webpack 버전, 설정 이름 및 경고/오류 수를 보여줍니다.
  • 해시는 이제 기본적으로 숨겨있습니다. 이것은 stats.hash로 변경할 수 있습니다.
  • 기본적으로 빌드 타임 스탬프가 더 이상 표시되지 않습니다. 이것은 stats.builtAt로 활성화 할 수 있습니다. 요약에 타임 스탬프가 표시됩니다.
  • 하위 편집은 더 이상 기본적으로 표시되지 않습니다. stats.children으로 표시할 수 있습니다.

Progress

CLI에서 --progress에 사용하지만 플러그인에서 수동으로 사용할 수도 있는 ProgressPlugin에 몇 가지 개선 사항이 적용되었습니다.

처리된 모듈만 계산하는 데 사용되었습니다. 이제 entries dependencies및 modules을 계산할 수 있습니다. 이제 모두 기본적으로 표시됩니다.

현재 처리된 모듈을 표시하는 데 사용됩니다. 이로 인해 많은 stderr 출력이 발생하고 일부 콘솔에서 성능 문제가 발생했습니다. 이제 기본적으로 비활성화되어 있습니다(activeModules 옵션). 또한 콘솔의 스팸 양을 줄입니다. 이제 모듈을 빌드하는 동안 stderr에 쓰는 것이 500ms로 제한됩니다.

프로파일링 모드도 업그레이드 되었으며 중첩된 진행 메세지의 타이밍을 표시합니다. 성능 문제를 일으키는 플러그인을 쉽게 파악할 수 있습니다.

새로 추가된 percentBy-옵션은 ProgressPlugin에 진행률을 계산하는 방법을 알려줍니다.

new webpack.ProgressPlugin({ percentBy: 'entries' });

진행률을 보다 정확하게 만들기 위해 ProgressPlugin은 마지막으로 알려진 총 모듈 수를 캐시하고 다음 빌드에서 총 모듈 수 값을 재사용 합니다. 첫 번째 빌드는 캐시를 워밍업하지만 다음 빌드는 캐시를 사용하고 업데이트합니다.

Automatic unique naming

청크 로드에 동일한 전역 변수를 사용하기 때문에 webpack 4에서 여러 webpack 런타임은 동일한 HTML 페이지에서 충돌할 수 있습니다. 이 문제를 수정하려면 output.jsonpFunction 구성에 커스텀 이름을 제공해야 합니다.

Webpack 5는 package.json 및 name에서 빌드의 고유 이름을 자동으로 유추하고 이를 output.uniqueName의 기본값으로 사용합니다.

output.uniqueName값은 잠재적으로 충돌하는 모든 전역을 고유하게 만드는 데 사용됩니다.

마이그레이션: package.json의 고유한 이름을 위해 output.jsonpFunction을 제거합니다.

Automatic public path

Webpack 5는 가능한 경우 output.publicPath을 자동으로 결정합니다.

Typescript typings

Webpack 5는 소스 코드에서 타입을 생성하고 npm 패키지를 통해 나타냅니다.

마이그레이션: @types/webpack을 제거합니다. 이름이 다른 경우 참조를 업데이트하세요.

Major Changes: Optimization

Nested tree-shaking

Webpack은 이제 export의 중첩 속성에 대한 접근을 추적할 수 있습니다. 네임스페이스 객체를 다시 export할 때 Tree Shaking (미샤용 export 제거 및 export 맹글링)을 개선할 수 있습니다.

// inner.js
export const a = 1;
export const b = 2;

// module.js
export * as inner from './inner';
// 또는 import * as inner from './inner'; export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);

예시에서 b는 프로덕션 모드에서 제거될 수 있습니다.

Inner-module tree-shaking

Webpack 4는 모듈의 export와 import 간의 의존성을 분석하지 않았습니다. Webpack 5에는 프로덕션 모드에서 기본적으로 활성화되어 있는 새로운 옵션 optimization.innerGraph가 있습니다. optimization.innerGraph은 export에서 import까지의 의존성을 파악하기 위해 모듈의 기호에 대한 분석을 실행합니다.

다음과 같은 모듈이 예시입니다.

import { something } from './something';

function usingSomething() {
  return something;
}

export function test() {
  return usingSomething();
}

내부 그래프 알고리즘은 test export가 사용될 때만 something이 사용된다는 것을 알아낼 것입니다. 따라서 더 많은 export를 사용하지 않는 것으로 표시하고 번들에서 더 많은 코드를 생략할 수 있습니다.

"sideEffects": false가 설정되면 더 많은 모듈을 생략할 수 있습니다. 예시에서 ./something은 test export가 사용되지 않을 때 생략됩니다.

사용하지 않은 export에 대한 정보를 얻으려면 optimization.usedExports가 필요합니다. 부작용이 없는 모듈을 제거하려면 optimization.sideEffects가 필요합니다.

다음 기호를 분석할 수 있습니다.

  • 함수 선언
  • 클래스 선언
  • export default 또는 다음과 같은 변수 선언
    • 함수 표현식
    • 클래스 표현식
    • 시퀀스 표현식
    • /*#__PURE__*/ 표현식
    • 지역 변수
    • imported 바인딩

피드백: 분석에서 누락된 것을 발견하고 문제를 보고해 주시면 추가를 고려하겠습니다.

평가된 코드가 범위 내의 모든 기호를 참조할 수 있기 때문에 eval()을 사용하면 모듈에 대한 최적화를 구제할 수 있습니다.

내부 모듈 tree-shaking 최적화는 심층 범위 분석이라고도 합니다.

CommonJs Tree Shaking

CommonJs export 및 require()호출을 분석하는 사용된 export에서 옵트아웃 하는데 사용되는 webpack입니다.

Webpack 5는 일부 CommonJs 구성에 대한 지원을 추가하여 사용하지 않는 CommonJs export를 제거하고 require() 호출에서 참조된 export 이름을 추적할 수 있습니다.

다음 구문이 지원됩니다.

  • exports|this|module.exports.xxx = ...
  • exports|this|module.exports = require("...") (reexport)
  • exports|this|module.exports.xxx = require("...").xxx (reexport)
  • Object.defineProperty(exports|this|module.exports, "xxx", ...)
  • require("abc").xxx
  • require("abc").xxx()
  • ESM에서 importing
  • ESM을 require()
  • 플래그가 지정된 exportType(비엄격한 ESM export에 대한 특별 핸들링)
    • Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0 })
    • exports|this|module.exports.__esModule = true|!0
  • 앞으로 더 많은 구성을 지원할 계획입니다.

분석할 수 없는 코드를 감지하면 성능상의 이유로 webpack은 모듈에 대한 export 정보를 구제하고 전혀 추적하지 않습니다.

Side-Effect analysis

package.json의 "sideEffects" 플래그를 사용하면 수동으로 모듈에 부작용이 없는 플래그를 지정할 수 있으므로 사용하지 않을 때 모듈을 삭제할 수 있습니다.

또한 webpack 5는 소스 코드의 정적 분석에 따라 모듈에 부작용이 없는 것으로 자동 플래그를 지정할 수 있습니다.

Optimization per runtime

이제 webpack 5는 런타임당 모듈을 분석하고 최적화할 수 있고 기본적으로 수행합니다(런타임은 종종 엔트리 포인트와 같습니다). 실제로 필요한 엔트리 포인트에서만 import할 수 있습니다. 엔트리 포인트는 엔트리 포인트 당 런타임을 사용하는 한 서로 영향을 미치지 않습니다.

Module Concatenation

모듈 연결은 런타임별로 작동하여 각 런타임에 대해 서로 다른 연결을 허용합니다.

모듈 연결은 일급 객체가 되었으며 이제 모든 모듈 및 의존성이 모듈 연결을 구현할 수 있습니다. 처음에 webpack 5는 ExternalModules 및 json 모듈에 대한 지원을 이미 추가했으며 곧 더 많이 제공할 예정입니다.

General Tree Shaking improvements

export *가 더 많은 정보를 추적하고 더 이상 default export를 사용된 것으로 표시하지 않도록 개선되었습니다.

export *는 이제 webpack이 충돌하는 export가 있다고 확신할 때 경고를 표시합니다.

import()를 사용하면 /* webpackExports: ["abc", "default"] */ 마법 주석을 통해 모듈을 수동으로 tree shake 할 수 있습니다.

Development Production Similarity

개발 모드에서의 빌드 성능과 두 모드 간의 유사성을 개선하여 프로덕션 전용 문제를 피하는 것 사이에서 좋은 절충안을 찾으려고 노력합니다.

Webpack 5는 기본적으로 두 모드 모두에서 sideEffects 최적화를 활성화합니다. Webpack 4에서 sideEffects 최적화는 package.json의 잘못된 "sideEffects" 플래그로 인해 일부 프로덕션 전용 오류로 이어집니다. 개발에서 sideEffects 최적화를 활성화하면 이러한 문제를 더 빠르고 쉽게 찾을 수 있습니다.

대부분의 경우 개발 및 프로덕션은 파일 시스템의 대소문자 구분이 다른 OS에서 발생하므로 webpack 5는 대소문자가 이상한 경우 몇 가지 경고/오류를 추가합니다.

Improved Code Generation

Webpack은 ASI가 발생하는 시점을 감지하고 세미콜론이 삽입되지 않은 경우 더 짧은 코드를 생성합니다. Object(...) -> (0, ...)

Webpack은 여러 export getter를 단일 런타임 함수 호출로 병합합니다. r.d(x, "a", () => a); r.d(x, "b", () => b); -> r.d(x, {a: () => a, b: () => b});

이제 output.environment에 추가 옵션이 있습니다. Webpack에 의해 생성된 런타임 코드에 사용할 수 있는 ECMAScript 기능을 지정할 수 있습니다.

일반적으로 output.environment 옵션을 직접 지정하지 않지만 대신 target 옵션을 사용합니다.

Webpack 4는 ES5 코드만 내보내는 데 사용됩니다. 이제 webpack 5는 ES5 및 ES6/ES2015 코드를 모두 생성할 수 있습니다.

최신 브라우저만 지원하면 화살표 기능을 사용하여 더 짧은 코드를 생성하고 export default에 대해 TDZ와 함께 const선언을 사용하여 더 많은 사양 준수 코드를 생성합니다.

Improved target option

Webpack 4에서 target은 "web"과 "node" 및 몇 가지 다른 것들 사이에서 대략적인 선택이었습니다. Webpack 5는 여기에 더 많은 옵션을 제공합니다.

target 옵션은 이제 생성된 코드에 대해 이전보다 더 많은 영향을 미칩니다.

  • 청크 로딩 방식
  • 청크 형식
  • wasm 로딩 방법
  • worker에서 청크 및 wasm 로딩 방법
  • 사용된 전역 객체
  • publicPath가 자동으로 결정되어야 하는 경우
  • 생성된 코드에 사용된 ECMAScript 기능/구문
  • 기본적으로 활성화된 externals
  • 일부 Node.js 호환 레이어의 동작(global, __filename, __dirname)
  • 모듈 해석(browser 필드, exports 및 imports 조건)
  • 일부 로더는 target 옵션에 따라 동작을 변경할 수 있습니다.

위의 여러 영향 중 일부는 "web"과 "node" 사이의 선택이 너무 개략적이고 더 많은 정보가 필요합니다. 따라서 최소 버전을 지정할 수 있습니다. "node10.13"와 같이 타겟 환경에 대한 더 많은 속성을 유추합니다.

이제 배열로 여러 타겟을 결합하는 것도 허용되며 webpack은 모든 타겟의 최소 속성을 결정합니다. 배열을 사용하는 것은 "web" 또는 "node"와 같은 전체 정보를 제공합니다(버전 번호 없이). 예를 들어 ["web", "es2020"]은 두 부분 타겟을 결합합니다.

브라우저리스트 데이터를 사용하여 환경 속성을 결정하는 타겟 "browserslist"가 있습니다. "browserslist"는 프로젝트에서 사용할 수 있는 브라우저리스트 구성이 있는 경우에도 기본적으로 사용됩니다. 이러한 구성을 사용할 수 없는 경우 기본적으로 "web" 타겟이 사용됩니다.

일부 조합 및 기능은 아직 구현되지 않아 오류가 발생할 수 있습니다. 오류는 향후 기능을 위한 준비입니다. 예시:

  • ["web", "node"]는 아직 구현되지 않은 범용 청크 로딩 방법으로 이어집니다.
  • ["web", "node"] + output.module: true는 아직 구현되지 않은 모듈 청크 로딩 방법으로 이어집니다.
  • "web"은 http(s): import가 아직 구현되지 않은 module 외부 요소로 처리되도록 합니다(해결 방법: import() 대신 externalsPresets: { web: false, webAsync: true }를 사용합니다).

SplitChunks and Module Sizes

이제 모듈은 단일 숫자보다 더 나은 방식으로 크기를 표현합니다. 이제 다양한 유형의 크기가 있습니다.

SplitChunksPlugin은 이제 이런 다양한 크기를 처리하는 방법을 알고 있으며 이를 minSize 및 maxSize에 사용합니다. 기본적으로 javascript 크기만 처리되지만 이제 여러 값을 전달하여 관리할 수 있습니다.

module.exports = {
  optimization: {
    splitChunks: {
      minSize: {
        javascript: 30000,
        webassembly: 50000,
      },
    },
  },
};

여전히 크기에 단일 숫자를 사용할 수 있습니다. 이 경우 webpack은 자동으로 기본 크기 유형을 사용합니다.

mini-css-extract-plugin은 css/mini-extra를 크기 유형으로 사용하고 크기 유형을 기본 유형에 자동으로 추가합니다.

Major Changes: Performance

Persistent Caching

이제 파일 시스템 캐시가 있습니다. 옵트인이며 다음 구성으로 활성화할 수 있습니다.

module.exports = {
  cache: {
    // 1. 캐시 유형을 파일 시스템으로 설정
    type: 'filesystem',

    buildDependencies: {
      // 2. 설정 변경 시 캐시 무효화를 얻기 위해 설정을 buildDependency로 추가합니다.
      config: [__filename],

      // 3. 빌드가 의존하는 다른 것들이 있다면 여기에 추가할 수 있습니다.
      // webpack, 로더 및 설정에서 참조하는 모든 모듈이 자동으로 추가됩니다.
    },
  },
};

중요 참고 사항:

기본적으로 webpack은 webpack이 있는 node_modules 디렉터리가 오직 패키지 관리자에 의해 수정된다고 가정합니다. node_modules에 대해 해싱 및 타임 스탬프를 건너뜁니다. 대신 성능상의 이유로 패키지 이름과 버전만 사용됩니다. 심볼릭 링크(예: npm/yarn link)는 resolve.symlinks: false가 지정되지 않는 한 괜찮습니다. 어쨌든 피하는 것이 좋습니다. snapshot.managedPaths: []로 최적화를 옵트아웃하지 않는 한 node_modules의 파일을 직접 편집하지 마세요. Yarn PnP webpack을 사용할 때 Yarn 캐시는 변경할 수 없다고 가정합니다(일반적으로 그렇습니다). snapshot.immutablePaths: []을 사용하여 최적화를 옵트아웃 할 수 있습니다.

node_modules 사용 시 캐시는 node_modules/.cache/webpack resp에 저장됩니다. Yarn PnP 사용 시 기본 값은 .yarn/.cache/webpack 입니다. 모든 플러그인이 캐싱을 올바르게 처리할 때 수동으로 삭제할 필요가 없습니다.

많은 내부 플러그인도 영구 캐시를 사용합니다. 예: 소스맵 생성 캐시용 SourceMapDevToolPlugin 또는 모듈 수 캐시용 ProgressPlugin

영구 캐시는 캐시에 대한 읽기 및 쓰기 액세스를 최적화하기 위해 사용량에 따라 여러 캐시 파일을 자동으로 생성합니다.

기본적으로 타임 스탬프는 개발 모드의 스냅샷과 프로덕션 모드의 파일 해시에 사용됩니다. 파일 해시를 사용하면 CI에서도 영구 캐싱을 사용할 수 있습니다.

Compiler Idle and Close

이제 컴파일러는 사용한 후 닫아야 합니다. 컴파일러는 이제 유휴 상태로 들어가고 나가며 이러한 상태에 대한 훅을 갖습니다. 플러그인은 상태에 대한 훅을 사용하여 중요하지 않은 작업을 수행할 수 있습니다. 즉, 영구 캐시는 캐시를 디스크에 천천히 저장합니다. 컴파일러 종료 시 - 나머지 모든 작업은 가능한 빨리 완료되어야 합니다. 콜백은 종료 신호를 보냅니다.

플러그인과 해당 작성자는 일부 사용자가 컴파일러를 닫는 것을 잊어버릴 수 있음을 예상해야 합니다. 따라서 모든 작업은 유휴 상태에서도 완료되어야 합니다. 작업이 완료될 때 프로세스가 종료되지 않도록 해야 합니다.

webpack() 파사드는 콜백이 전달될 때 자동으로 close를 호출합니다.

마이그레이션: Node.js API를 사용하는 동안 컴파일러가 완료되면 Compiler.close를 호출해야 합니다.

File Emitting

Webpack은 첫 번째 빌드 중에 항상 모든 출력 파일을 내보내는 데 사용되었지만 증분 빌드 중에 변경되지 않은 파일 쓰기를 건너뛰었습니다. Webpack이 실행되는 동안 다른 어떤 것도 출력 파일을 변경하지 않는다고 가정합니다.

영구 캐싱이 추가되면 wepback 프로세스를 다시 시작할 때도 시계와 같은 경험이 제공되어야 하지만 wepback이 실행되지 않을 때 출력 디렉터리가 변경되지 않는다고 생각하는 것은 지나친 가정입니다.

따라서 wepback은 이제 출력 디렉터리의 기존 파일을 확인하고 파일의 내용을 메모리의 출력 파일과 비교합니다. 파일이 변경된 경우에만 기록합니다. 비교하는 것은 첫 번째 빌드에서만 수행됩니다. 모든 증분 빌드는 실행 중인 webpack 프로세스에서 새 애셋이 생성될 때 항상 파일을 작성합니다.

Webpack과 플러그인은 콘텐츠가 변경된 경우에만 새 애셋을 생성한다고 가정합니다. 입력이 같을 때 새 애셋이 생성되지 않도록 하려면 캐싱을 사용해야 합니다. 위 조언을 따르지 않으면 성능이 저하됩니다.

콘텐츠 해시를 포함하고 있는 [immutable] 플래그가 지정된 파일은 동일한 이름의 파일이 이미 존재하는 경우 절대 작성되지 않습니다. 파일 콘텐츠가 변경되면 콘텐츠 해시가 변경된다고 가정합니다. 위 가정은 일반적으로 참이지만 wepback이나 플러그인 개발 중에는 항상 참이 아닐 수도 있습니다.

Major Changes: Long outstanding problems

Code Splitting for single-file-targets

타겟 파일 시작만 허용하는 대상(예: node, WebWorker, electron main)은 이제 런타임에 의해 자동으로 부트스트랩하는 데 필요한 종속 조각 로드를 지원합니다.

지원할 경우 chunks: "all" 및 optimization.runtimeChunk가 있는 타겟에 대하여 opimization.splitChunks를 사용할 수 있습니다.

청크 로딩이 비동기인 타겟의 경우 초기 평가도 비동기화됩니다. 이제 내보낸 값이 Promise이기 때문에 output.library를 사용할 때 문제가 될 수 있습니다.

Updated Resolver

enhanced-resolve가 v5로 업데이트되었습니다. 다음과 같은 개선 사항이 있습니다.

  • 해석은 누락된 파일과 같은 더 많은 의존성을 추적합니다.
  • 앨리어싱에는 여러 대안이 있을 수 있습니다.
  • 이제 false에 대한 앨리어싱이 가능합니다.
  • exports 및 imports 필드와 같은 기능을 지원합니다.
  • 성능이 향상되었습니다.

Chunks without JS

JS 코드가 포함되지 않은 청크는 더 이상 JS 파일을 생성하지 않습니다. 위와 같은 경우 CSS만 포함하는 청크를 가질 수 있습니다.

Major Changes: Future

Experiments

모든 기능이 처음부터 안정적인 것은 아닙니다. Webpack 4에서 실험적 기능을 추가하고 체인지로그에 실험적이라고 언급했지만 실험적이라는 구성이 항상 명확한 것은 아닙니다.

Webpack 5에는 실험 기능을 활성화할 수 있는 새로운 experiments 설정 옵션이 있습니다. 새로운 설정 옵션으로 활성화/사용되는 항목이 명확해집니다.

Webpack은 의미론적 버전 관리를 따르지만 실험적 기능에 대해서는 예외가 됩니다. 실험적 기능에는 마이너 webpack 버전의 주요 변경 사항이 포함될 수 있습니다. 주요 변경 사항이 포함될 경우 변경 로그에 명확한 메모를 추가합니다. 메모를 추가함으로써 실험적 기능을 더 빠르게 반복할 수 있으며 안정적인 기능을 위해 메이저 버전을 더 오래 유지할 수 있습니다.

다음 실험은 webpack 5와 함께 제공됩니다.

  • Webpack 4와 같은 오래된 WebAssembly 지원 (experiments.syncWebAssembly)
  • 업데이트된 사양에 따른 새로운 WebAssembly 지원 (experiments.asyncWebAssembly)
    • WebAssembly 모듈을 비동기 모듈로 만듭니다.
  • 최상위 수준 대기 3단계 제안 (experiments.topLevelAwait)
    • 최상위 수준에서 await를 사용하면 모듈을 비동기 모듈로 만듭니다.
  • 번들을 모듈로 방출 (experiments.outputModule)
    • 위 내용은 번들에서 래퍼 IIFE를 제거하고 엄격 모드를 시행하고 <script type="module">을 통해 지연 로드하고 모듈 모드에서 최소화했습니다.

또한 WebAssembly 지원이 이제 기본적으로 비활성화되어 있음을 의미합니다.

Minimum Node.js Version

지원되는 최소 Node.js 버전이 6에서 10.13.0(LTS)으로 증가했습니다.

마이그레이션: 사용 가능한 최신 Node.js 버전으로 업그레이드하세요.

Changes to the Configuration

Changes to the Structure

  • entry: {}는 이제 빈 객체를 허용합니다. 플러그인을 사용하여 항목을 추가할 수 있습니다.
  • target은 배열, 버전 및 브라우저 리스트를 지원합니다.
  • cache: Object 제거됨: 더 이상 메모리 캐시 객체로 설정할 수 없습니다.
  • cache.type 추가: 이제 "memory"와 "filesystem" 중에서 선택할 수 있습니다.
  • cache.type = "filesystem"에 대한 새로운 구성 옵션이 추가되었습니다.
    • cache.cacheDirectory
    • cache.name
    • cache.version
    • cache.store
    • cache.hashAlgorithm
    • cache.idleTimeout
    • cache.idleTimeoutForInitialStore
    • cache.buildDependencies
  • snapshot.resolveBuildDependencies 추가됨
  • snapshot.resolve 추가됨
  • snapshot.module 추가됨
  • snapshot.managedPaths 추가됨
  • snapshot.immutablePaths 추가됨
  • resolve.cache 추가됨: 안전한 해결 캐시를 비활성화/활성화할 수 있습니다.
  • resolve.concord 제거됨
  • resolve.moduleExtensions 제거됨
  • resolve.alias 값은 이제 배열 또는 false일 수 있습니다.
  • resolve.restrictions 추가됨: 잠재적 해결 결과를 제한할 수 있습니다.
  • resolve.fallback 추가됨: 해결에 실패한 요청에 별칭 허용
  • resolve.preferRelative 추가됨: 모듈 요청도 적절한 요청으로 해결할 수 있습니다.
  • 기본 Node.js 모듈에 대한 자동 폴리필이 제거되었습니다.
    • node.Buffer 제거됨
    • node.console 제거됨
    • node.process 제거됨
    • node.* (Node.js 기본 모듈) 제거됨
    • 마이그레이션: resolve.alias 및 ProvidePlugin. 오류가 힌트를 줄 것입니다. (v4에서 사용되는 폴리필 및 참조는 node-libs-browser 참조)
  • output.filename은 이제 함수가 될 수 있습니다.
  • output.assetModuleFilename 추가됨
  • output.jsonpScriptType이 output.scriptType으로 이름이 변경되었습니다.
  • devtool이 더 엄격해집니다.
    • 형식: false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
  • optimization.chunkIds: "deterministic" 추가됨
  • optimization.moduleIds: "deterministic" 추가됨
  • optimization.moduleIds: "hashed" 더 이상 사용되지 않음
  • optimization.moduleIds: "total-size" 제거됨
  • 모듈 및 청크 ID에 대하여 더 이상 사용되지 않은 플래그가 제거되었습니다.
    • optimization.hashedModuleIds 제거됨
    • optimization.namedChunks 및 NamedChunksPlugin 제거됨
    • optimization.namedModules 및 NamedModulesPlugin 제거됨
    • optimization.occurrenceOrder 제거됨
    • 마이그레이션: chunkIds 및 moduleIds 사용
  • optimization.splitChunks test 더 이상 청크 이름과 일치하지 않습니다.
    • 마이그레이션: 테스트 함수 사용 (module, { chunkGraph }) => chunkGraph.getModuleChunks(module).some(chunk => chunk.name === "name")
  • optimization.splitChunks minRemainingSize 추가됨
  • optimization.splitChunks filename이 이제 함수가 될 수 있습니다.
  • optimization.splitChunks크기는 이제 소스 유형당 크기가 있는 객체가 될 수 있습니다.
    • minSize
    • minRemainingSize
    • maxSize
    • maxAsyncSize
    • maxInitialSize
  • optimization.splitChunks maxAsyncSize 및 maxInitialSize가 maxSize 옆에 추가됨: 초기 및 비동기 청크에 대해 서로 다른 최대 크기를 지정할 수 있습니다.
  • optimization.splitChunks name: true 제거됨: 자동 이름은 더 이상 지원되지 않습니다.
    • 마이그레이션: 기본값을 사용합니다. chunkIds: "named"는 디버깅에 유용한 이름을 파일에 제공합니다.
  • optimization.splitChunks.cacheGroups[].idHint 추가됨: 명명된 청크 ID를 선택하는 방법에 대한 힌트 제공
  • optimization.splitChunks automaticNamePrefix 제거됨
    • 마이그레이션: 대신 idHint를 사용합니다.
  • optimization.splitChunks filename이 더 이상 초기 청크로 제한되지 않습니다.
  • optimization.splitChunks usedExports가 모듈을 비교할 때 사용된 export를 포함하도록 추가됨
  • optimization.splitChunks.defaultSizeTypes 추가됨: 크기에 숫자를 사용할 때 크기 유형 지정
  • optimization.mangleExports 추가됨
  • optimization.minimizer "..."를 사용하여 기본값을 참조할 수 있습니다.
  • optimization.usedExports "global" 값이 추가되어 런타임당 분석을 비활성화하고 대신 전역적으로 수행할 수 있어 성능이 향상되었습니다.
  • optimization.noEmitOnErrors가 optimization.emitOnErrors로 이름이 바뀌고 로직이 반전됨
  • optimization.realContentHash 추가됨
  • output.devtoolLineToLine 제거됨
    • 마이그레이션: 대체 없음
  • output.chunkFilename: Function이 이제 허용됩니다.
  • output.hotUpdateChunkFilename: Function은 이제 금지됨: 어쨌든 작동하지 않았습니다.
  • output.hotUpdateMainFilename: Function은 이제 금지됨: 어쨌든 작동하지 않았습니다.
  • output.importFunctionName: string은 지원되지 않는 환경에 대한 폴리필을 허용하기 위해 import()를 대체하는 이름을 지정합니다.
  • output.charset 추가됨: false로 설정하면 스크립트 태그의 charset 속성 생략
  • output.hotUpdateFunction이 output.hotUpdateGlobal로 이름이 변경되었습니다.
  • output.jsonpFunction이 output.chunkLoadingGlobal로 이름이 변경되었습니다.
  • output.chunkCallbackFunction이 output.chunkLoadingGlobal로 이름이 변경되었습니다.
  • output.chunkLoading 추가됨
  • output.enabledChunkLoadingTypes 추가됨
  • output.chunkFormat 추가됨
  • module.rules resolve와 parser는 다른 방식으로 병합됩니다.(객체는 철저히 병합되고 배열에는 이전 값을 참조하기 위해 "..."가 포함될 수 있음)
  • module.rules parser.worker 추가됨: 지원되는 worker 구성 허용
  • module.rules query 및 loaders 제거됨
  • module.rules options 문자열 전달은 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 옵션 객체를 전달하고 지원되지 않는 경우 로더에서 이슈를 엽니다.
  • module.rules mimetype 추가됨: DataURI와 MIME타입 일치 허용
  • module.rules descriptionData 추가됨: package.json의 데이터 일치 허용
  • module.defaultRules "..."는 기본값을 참조하는 데 사용할 수 있습니다.
  • stats.chunkRootModules 추가됨: 청크에 대한 루트 모듈 표시
  • stats.orphanModules 추가됨: 방출되지 않는 모듈 표시
  • stats.runtime 추가됨: 런타임 모듈 표시
  • stats.chunkRelations 추가됨: parent/children/sibling 청크 표시
  • stats.errorStack 추가됨: webpack 내부 스택 오류 추적 표시
  • stats.preset 추가됨: 사전 설정 선택
  • stats.relatedAssets 추가됨: 다른 애셋과 관련된 애셋 표시 (예: SourceMaps)
  • stats.warningsFilter가 더 이상 사용되지 않고 ignoreWarnings로 대체됨
  • BannerPlugin.banner 특징 변경
    • data.basename 제거됨
    • data.query 제거됨
    • 마이그레이션: filename에서 추출
  • SourceMapDevToolPlugin lineToLine 제거됨
    • 마이그레이션: 대체 없음
  • 전체 컴파일을 위한 해시인 [hash]는 이제 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 [fullhash]를 사용하거나 다른 해시 옵션을 사용하는 것이 좋습니다.
  • [modulehash]는 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 [hash]를 사용합니다.
  • [moduleid]는 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 [id]를 사용합니다.
  • [filebase] 제거됨
    • 마이그레이션: 대신 [base]를 사용합니다.
  • 파일 기반 템플릿을 위한 새로운 플레이스홀더 (예: SourceMapDevToolPlugin)
    • [name]
    • [base]
    • [path]
    • [ext]
  • 함수를 전달할 때 externals는 이제 다른 특징을 갖습니다({ context, request }, callback).
    • 마이그레이션: 특징 변경
  • externalsPresets 추가됨
  • experiments 추가됨 (위의 실험 섹션 참조)
  • watchOptions.followSymlinks 추가됨
  • watchOptions.ignored는 이제 정규 표현식이 될 수 있습니다.
  • webpack.util.serialization가 이제 나타납니다.

Changes to the Defaults

  • target은 이제 기본적으로 브라우저리스트 설정을 사용할 수 있는 경우 "browserslist"입니다.
  • module.unsafeCache는 이제 기본적으로 node_modules에 대해서만 활성화됩니다.
  • optimization.moduleIds는 기본적으로 size 대신 프로덕션 모드에서 deterministic으로 설정됩니다.
  • optimization.chunkIds는 기본적으로 total-size 대신 프로덕션 모드에서 deterministic으로 설정됩니다.
  • none 모드에서 optimization.nodeEnv의 기본값은 false입니다.
  • optimization.splitChunks.minSize는 프로덕션 환경에서 기본적으로 20k로 설정됩니다.
  • optimization.splitChunks.enforceSizeThreshold는 프로덕션 환경에서 기본적으로 50k로 설정됩니다.
  • optimization.splitChunks minRemainingSize의 기본값은 minSize입니다.
    • 나머지 부분이 너무 작은 경우 생성되는 분할된 청크가 줄어듭니다.
  • optimization.splitChunks maxAsyncRequests 및 maxInitialRequests 기본값이 30으로 증가되었습니다.
  • optimization.splitChunks.cacheGroups.vendors가 optimization.splitChunks.cacheGroups.defaultVendors로 이름이 변경되었습니다.
  • optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk는 이제 기본값이 true로 설정됩니다.
  • optimization.minimizer 타겟 기본값은 이제 terser 옵션에서 compress.passes: 2를 사용합니다.
  • cache가 사용될 때 resolve(Loader).cache의 기본값은 true로 설정됩니다.
  • resolve(Loader).cacheWithContext의 기본값은 false로 설정됩니다.
  • resolveLoader.extensions는 .json을 제거합니다.
  • node.global node.__filename 및 node.__dirname의 기본값은 node-target에서 false로 설정됩니다.
  • stats.errorStack의 기본값은 false로 설정됩니다.

Loader related Changes

this.getOptions

새로운 API는 로더의 옵션 사용을 단순화해야 합니다. 유효성 검사를 위해 JSON 스키마를 전달할 수 있습니다. 자세한 내용은 PR을 참고하세요.

this.exec

this.exec은 로더 컨텍스트에서 제거되었습니다.

마이그레이션: 로더 자체에서 구현할 수 있습니다.

this.getResolve

로더 API의 getResolve(options) 다른 방식으로 옵션을 병합합니다. module.rules resolve를 참고하세요.

Webpack 5는 발행 의존성마다 다르기 때문에 dependencyType를 옵션으로 전달하는 것이 합리적일 수 있습니다.(예:"esm", "commonjs" 또는 기타).

Major Internal Changes

다음 변경 사항은 플러그인 작성자에게만 해당합니다.

New plugin order

이제 webpack 5의 플러그인은 설정 기본값이 적용되기전에 적용됩니다. 위의 내용을 통하여 플러그인이 자체 기본값을 적용하거나 사전 설정으로 작동할 수 있습니다.

그러나 플러그인이 적용될 때 설정할 설정값에 의존할 수 없기 때문에 New plugin order 또한 주요 변경 사항입니다.

마이그레이션: 플러그인 훅에서만 설정에 액세스합니다. 또는 설정에 대한 액세스를 무조건 피하고 생성자를 통해 옵션을 사용하는 것이 가장 좋습니다.

Runtime Modules

런타임 코드의 상당 부분이 소위 "런타임 모듈"로 옮겨졌습니다. "런타임 모듈"과 같은 특수 모듈은 런타임 코드를 추가하는 역할을 합니다. 모든 청크에 추가할 수 있지만 현재는 항상 런타임 청크에 추가됩니다. "런타임 요구사항"이 번들에 추가되는 런타임 모듈 또는 코어 런타임 부분을 제어함으로써 사용되는 런타임 코드만 번들에 추가됩니다. 향후 필요할 때 런타임 코드를 로드하기 위해 런타임 모듈을 주문형 로드 청크에 추가할 수도 있습니다.

대부분의 경우 코어 런타임은 엔트리 모듈을 __webpack_require__로 호출하는 대신 인라인할 수 있습니다. 번들에 다른 모듈이 없으면 __webpack_require__가 전혀 필요하지 않습니다. __webpack_require__는 여러 모듈이 단일 모듈로 연결되는 모듈 연결과 잘 결합됩니다.

최상의 경우 런타임 코드가 전혀 필요하지 않습니다.

마이그레이션: 플러그인의 webpack 런타임에 런타임 코드를 삽입하는 경우 대신 RuntimeModules를 사용하는 것이 좋습니다.

Serialization

Webpack에서 복잡한 객체의 직렬화를 허용하기 위해 직렬화 메커니즘이 추가되었습니다. 옵트인 의미 체계가 있으므로 직렬화해야 하는 클래스에 명시적으로 플래그를 지정하고 직렬화를 구현해야 합니다. 직렬화 메커니즘은 대부분의 모듈, 모든 의존성 및 일부 오류에 대해 수행되었습니다.

마이그레이션: 커스텀 모듈 또는 의존성을 사용할 때 영구 캐싱의 이점을 얻으려면 직렬화할 수 있도록 하는 것이 좋습니다.

Plugins for Caching

플러그인 인터페이스가 있는 Cache 클래스가 추가되었습니다. Cache 클래스를 사용하여 캐시에 쓰고 읽을 수 있습니다. 설정에 따라 다른 플러그인이 캐시에 기능을 추가할 수 있습니다. MemoryCachePlugin은 메모리 내 캐싱을 추가합니다. FileCachePlugin은 영구(파일 시스템) 캐싱을 추가합니다.

FileCachePlugin은 직렬화 메커니즘을 사용하여 디스크에서 캐시된 항목을 유지하고 복원하거나 캐시된 항목을 디스크에 유지하고 복원합니다.

Hook Object Frozen

hooks가 있는 클래스는 hooks 객체가 고정되어 있으므로 커스텀 훅을 추가하는 것은 더 이상 hooks로 불가능합니다.

마이그레이션: 커스텀 훅을 추가하는 방법 중 권장하는 것은 WeakMap 및 정적 getXXXHooks(XXX)(즉 getCompilationHook(compilation)) 방법을 사용하는 것입니다. 내부 클래스는 커스텀 훅에 사용되는 것과 동일한 메커니즘을 사용합니다.

Tapable Upgrade

Webpack 3 플러그인에 대한 compat 레이어가 제거되었습니다. Webpack 4에서는 이미 더 이상 사용되지 않습니다.

덜 사용되는 Tapable API가 제거되거나 더 이상 사용되지 않습니다.

마이그레이션: 새 Tapable API를 사용합니다.

Staged Hooks

실링 프로세스의 여러 단계에 대해 여러개의 훅이 있었습니다. 즉 optimizeDependenciesBasic optimizeDependencies 및 optimizeDependenciesAdvanced는 stage 옵션과 함께 사용할 수 있는 단일 훅을 위해 제거되었습니다. 가능한 단계 값은 OptimizationStages를 참고하세요.

마이그레이션: 대신 나머지 훅에 연걸합니다.stage 옵션을 추가할 수 있습니다.

Main/Chunk/ModuleTemplate deprecation

번들 템플릿이 리팩토링 되었습니다. MainTemplate/ChunkTemplate/ModuleTemplate은 더 이상 사용되지 않으며 JavascriptModulesPlugin이 이제 JS templating을 처리합니다.

리팩토링 이전에는 JS 출력이 Main/ChunkTemplate에서 처리되고 다른 출력(예: WASM, CSS)은 플러그인에서 처리되었습니다. 각각 다른 곳에서 출력되는 것은 JS이 1급인 반면 다른 출력은 2급인 것처럼 보입니다. 리팩토링은 플러그인에서 모든 출력을 처리하도록 변경합니다.

템플릿의 일부에 연결하는 것은 여전히 가능합니다. 훅은 이제 Main/ChunkTemplate 대신 JavascriptModulesPlugin에 있습니다. 플러그인도 훅을 가질 수 있습니다. 개발자는 첨부된 훅이라 부릅니다.

compat 레이어가 있으므로 Main/Chunk/ModuleTemplate은 여전히 존재하지만 tab 호출만 새 훅 위치에 위임합니다.

마이그레이션: 지원 중단 메세지의 조언을 따르세요. 주로 다른 위치의 훅을 가리킵니다.

Entry point descriptor

객체가 엔트리 포인트로 전달되는 경우 값은 문자열, 문자열 배열 또는 기술자가 될 수 있습니다.

module.exports = {
  entry: {
    catalog: {
      import: './catalog.js',
    },
  },
};

기술자 구문을 사용하여 엔트리 포인트에 추가 옵션을 전달할 수 있습니다.

Entry point output filename

기본적으로 엔트리 청크의 출력 파일은 output.filename에서 추출되지만 특정 항목에 대한 커스텀 출력 파일을 지정할 수 있습니다.

module.exports = {
  entry: {
    about: { import: './about.js', filename: 'pages/[name][ext]' },
  },
};

Entry point dependency

기본적으로 모든 엔트리 청크는 사용하는 모든 모듈을 저장합니다. dependOn 옵션을 사용하면 한 엔트리 청크에서 다른 엔트리 청크로 모듈을 공유할 수 있습니다.

module.exports = {
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

앱 청크에는 react-vendors가 가지고 있는 모듈이 포함되지 않습니다.

Entry point library

엔트리 기술자는 각 엔트리 포인트에 대해 다른 library 옵션을 전달할 수 있습니다.

module.exports = {
  entry: {
    commonjs: {
      import: './lib.js',
      library: {
        type: 'commonjs-module',
      },
    },
    amd: {
      import: './lib.js',
      library: {
        type: 'amd',
      },
    },
  },
};

Entry point runtime

엔트리 기술자는 엔트리당 runtime을 지정할 수 있습니다. 지정되면 항목에 대한 런타임 코드만 포함하는 이름의 청크가 생성됩니다. 여러 엔트리가 동일한 runtime을 지정하면 해당 청크에는 모든 항목에 대한 공통 런타임이 포함됩니다. 공통 런타임이 포함되는 것은 HTML 페이지에선 함께 사용할 수 있음을 의미합니다.

module.exports = {
  entry: {
    app: {
      import: './app.js',
      runtime: 'app-runtime',
    },
  },
};

Entry point chunk loading

엔트리 기술자는 엔트리당 chunkLoading을 지정할 수 있습니다. 엔트리의 런타임은 chunkLoading을 사용하여 청크를 로드합니다.

module.exports = {
  entry: {
    app: {
      import: './app.js',
    },
    worker: {
      import: './worker.js',
      chunkLoading: 'importScripts',
    },
  },
};

Order and IDs

Webpack은 증분된 순서로 ID를 할당하기 위해 특정 방식으로 컴파일 단계에서 모듈과 청크를 순서화하는 데 사용됩니다. 더 이상 그렇지 않습니다. 순서는 더 이상 ID 생성에 사용되지 않으며 대신 ID 생성에 대한 모든 권한은 플러그인에 있습니다.

모듈 및 청크의 순서를 최적화하는 훅이 제거되었습니다.

마이그레이션: 더 이상 컴파일 단계에서 모듈과 청크의 순서에 의존할 수 없습니다.

Arrays to Sets

  • Compilation.modules는 이제 세트입니다.
  • Compilation.chunks는 이제 세트입니다.
  • Chunk.files는 이제 세트입니다.

사용 중단 경고를 출력하는 compat 레이어가 있습니다.

마이그레이션: 배열 메소드 대신 세트 메소드를 사용합니다.

Compilation.fileSystemInfo

새 클래스는 캐시된 방식으로 파일 시스템에 대한 정보에 액세스하는 데 사용할 수 있습니다. 현재 파일 및 디렉터리 타임 스탬프를 모두 요청할 수 있습니다. 타임 스탬프에 대한 정보는 가능한 경우 관찰자로부터 전송되며, 그렇지 않으면 파일 시스템 액세스에 의해 결정됩니다.

향후에는 파일 콘텐츠 해시를 요청하는 기능이 추가될 것이며 모듈은 파일 해시 대신 파일 콘텐츠로 유효성을 확인할 수 있을 것입니다.

마이그레이션: file/contextTimestamps를 사용하는 대신 compilation.fileSystemInfo API를 사용하세요.

ContextModules의 직렬화를 허용하는 디렉터리에 대한 타임 스탬프가 이제 가능합니다.

변경된 파일을 더 쉽게 참조할 수 있도록 Compiler.modifiedFiles가 Compiler.removedFiles 옆에 추가되었습니다.

Filesystems

compiler.inputFileSystem 및 compiler.outputFileSystem 옆에 레코드 쓰기, 캐시 또는 프로파일링 출력과 같이 출력으로 간주되지 않는 모든 fs 작업에 대한 새로운 compiler.intermediateFileSystem이 있습니다.

파일 시스템은 이제 fs 인터페이스를 가지며 join 또는 mkdirp와 같은 추가 메소드를 더 이상 요구하지 않습니다. 그러나 join 또는 dirname과 같은 메소드가 있으면 사용됩니다.

Hot Module Replacement

HMR 런타임이 런타임 모듈로 리팩토링 되었습니다. HotUpdateChunkTemplate이 ChunkTemplate으로 병합되었습니다. ChunkTemplates 과 플러그인은 이제 HotUpdateChunk도 처리해야 합니다.

HMR 런타임의 자바스크립트 부분은 코어 HMR 런타임에서 분리되었습니다. 다른 모듈 유형도 이제 고유한 방식으로 HMR을 처리할 수 있습니다. 향후 mini-css-extract-plugin 또는 WASM 모듈에 대한 HMR을 허용할 것입니다.

마이그레이션: 새로 도입된 기능이므로 마이그레이션할 사항이 없습니다.

import.meta.webpackHot은 module.hot과 동일한 API를 나타냅니다. import.meta.webpackHot는 module에 대한 액세스 권환이 없는 엄격한 ESM 모듈(.mjs, 유형: package.json의 "module")에서도 사용할 수 있습니다.

Work Queues

Webpack은 함수를 호출하는 함수에 의한 모듈 처리와 병렬 처리를 제한하는 semaphore를 처리하는 데 사용됩니다. Compilation.semaphore가 제거되었으며 이제 비동기 대기열이 작업 대기열 및 프로세싱을 처리합니다. 각 단계에는 별도의 대기열이 있습니다.

  • Compilation.factorizeQueue: 의존성 그룹에 대한 모듈 팩토리 호출
  • Compilation.addModuleQueue: 모듈을 컴파일 대기열에 추가합니다(캐시에서 모듈을 복원할 수 있음).
  • Compilation.buildQueue: 필요한 경우 모듈을 빌드합니다(모듈을 캐시에 저장할 수 있음).
  • Compilation.rebuildQueue: 수동으로 트리거되면 모듈을 다시 빌드합니다.
  • Compilation.processDependenciesQueue: 모듈의 의존성을 처리합니다.

대기열에는 작업 처리를 감시하고 가로채기 위한 몇 가지 훅이 있습니다.

향후 여러 컴파일러가 함께 작동할 수 있으며 대기열을 가로채서 작업 오케스트레이션을 수행할 수 있습니다.

마이그레이션: 새로 도입된 기능이므로 마이그레이션할 사항이 없습니다.

Logging

Webpack 내부에는 이제 일부 로깅이 포함됩니다. stats.logging 및 infrastructureLogging 옵션을 사용하여 메세지를 활성화 할 수 있습니다.

Module and Chunk Graph

Webpack은 확인된 모듈을 의존성에 저장하고 포함된 모듈을 청크에 저장하는 데 사용됩니다. 하지만 더 이상 그렇지 않습니다. 모듈 그래프에서 모듈이 연결되는 방식에 대한 모든 정보는 이제 ModuleGraph 클래스에 저장됩니다. 모듈이 청크와 연결되는 방식에 대한 모든 정보는 이제 ChunkGraph 클래스에 저장됩니다. 청크 그래프에 의존하는 정보도 관련 클래스에 저장됩니다.

위 내용은 다음에 나오는 모듈에 대한 정보가 이동되었음을 의미합니다.

  • Module connections -> ModuleGraph
  • Module issuer -> ModuleGraph
  • Module optimization bailout -> ModuleGraph (필수: 대신 ChunkGraph가 필요한지 확인)
  • Module usedExports -> ModuleGraph
  • Module providedExports -> ModuleGraph
  • Module pre order index -> ModuleGraph
  • Module post order index -> ModuleGraph
  • Module depth -> ModuleGraph
  • Module profile -> ModuleGraph
  • Module id -> ChunkGraph
  • Module hash -> ChunkGraph
  • Module runtime requirements -> ChunkGraph
  • Module is in chunk -> ChunkGraph
  • Module is entry in chunk -> ChunkGraph
  • Module is runtime module in chunk -> ChunkGraph
  • Chunk runtime requirements -> ChunkGraph

Webpack은 캐시에서 복원할 때 그래프에서 모듈의 연결을 끊는 데 사용됩니다. 하지만 더 이상 필요하지 않습니다. 모듈은 그래프에 대한 정보를 저장하지 않으며 기술적으로 여러 그래프에서 사용할 수 있습니다. 이로써 캐싱이 더 쉬워집니다.

위 변경 사항의 대부분에 대해 compat 레이어가 있으며 사용 시 사용 중단 경고를 출력합니다.

마이그레이션: ModuleGraph 및 ChunkGraph에서 새 API 사용

Init Fragments

InitFragments를 위해 DependenciesBlockVariables가 제거되었습니다. DependencyTemplates는 이제 InitFragments를 추가하여 모듈 소스의 최상단에 코드를 삽입할 수 있습니다. InitFragments는 중복 제거를 허용합니다.

마이그레이션: 소스에 네거티브 인덱스에 있는 것을 삽입하는 대신 InitFragments를 사용하세요.

Module Source Types

모듈은 이제 Module.getSourceTypes()를 통해 지원하는 소스 유형을 정의해야 합니다. 유형에 따라 다른 플러그인은 지원하는 유형으로 source()를 호출합니다. 즉 소스 유형 javascript의 경우 JavascriptModulesPlugin이 소스 코드를 번들에 포함합니다. 소스 유형 webassembly는 WebAssemblyModulesPlugin이 WASM 파일을 내보내도록 합니다. 커스텀 소스 유형도 지원됩니다. 즉 mini-css-extract-plugin은 소스 유형 stylesheet을 사용하여 소스 코드를 CSS 파일에 포함할 것입니다.

모듈 유형과 소스 유형 사이에는 관계가 없습니다. 즉 모듈 유형 json은 소스 유형 javascript에도 사용하고 모듈 유형 webassembly/experimental은 javascript 및 webassembly 소스 유형을 사용합니다.

마이그레이션: 커스텀 모듈은 새로운 인터페이스 메소드를 구현해야 합니다.

Plugins for Stats

통계 preset, default, json 및 toString이 이제 플러그인 시스템에 의해 장착됩니다. 현재 통계를 플러그인으로 변환했습니다.

마이그레이션: 전체 통계 기능을 교체하는 대신 이제 커스터마이즈할 수 있습니다. 추가 정보는 이제 별도의 파일을 작성하는 대신 stats json에 추가될 수 있습니다.

New Watching

Wepback에서 사용하는 관찰자가 리팩토링 되었습니다. 이전에는 chokidar와 기본 의존성 fsevents(macOS에서만)를 사용했습니다. 이제 네이티브 Node.js fs만을 기반으로 합니다. 이는 webpack에 기본 의존성이 남아 있지 않음을 의미합니다.

또한 관찰하는 동안 파일 시스템에 대한 추가 정보를 캡처합니다. 이제 mtimes를 캡처하고 이벤트 시간과 누락된 파일에 대한 정보를 관찰합니다. 관찰하기 위해 WatchFileSystem API가 약간 변경되었습니다. 그동안 우리는 배열을 세트로, 객체를 맵으로 변환했습니다.

SizeOnlySource after emit

Webpack은 이제 Compilation.assets의 소스를 SizeOnlySource의 변형으로 대체하여 메모리 사용량을 줄입니다.

Emitting assets multiple times

Multiple assets emit different content to the same filename라는 경고가 오류가 발생했습니다.

ExportsInfo

모듈 export에 대한 정보가 저장되는 방식이 리팩토링 되었습니다. ModuleGraph는 이제 각 Module에 대한 ExportsInfo를 제공하며 export당 정보를 저장합니다. 또한 알 수 없는 export에 대한 정보와 모듈이 부작용 전용 방식으로 사용되는지 여부도 저장합니다.

각 export에 대해 다음 정보가 저장됩니다.

  • export가 사용됩니까? yes, no, not statically known, not determined. (optimization.usedExports 참조)

  • export가 제공됩니까? yes, no, not statically known, not determined. (optimization.providedExports 참조)

  • export 이름을 변경할 수 있습니까? yes, no, not determined

    .

  • export 이름이 변경된 경우 새 이름입니다(optimization.mangleExports 참조)

    .

  • 내포된 ExportsInfo, export가 정보가 첨부된 객체인 경우

    • 네임스페이스 객체를 다시 export 하는 데 사용됩니다. import * as X from "..."; export { X };
    • JSON 모듈에서 구조를 나타내는 데 사용

Code Generation Phase

편집은 이제 별도의 편집 단계로 코드 생성 기능을 제공합니다. 더 이상 Module.source() 또는 Module.getRuntimeRequirements()에 숨겨져 실행되지 않습니다.

코드 생성 기능을 제공하면 흐름이 훨씬 더 깨끗해집니다. 또한 이 단계의 진행 상황을 보고할 수 있으며 프로파일링할 때 코드 생성을 더 잘 볼 수 있습니다.

마이그레이션: Module.source()와 Module.getRuntimeRequirements()는 이제 더 이상 사용되지 않습니다. 대신 Module.codeGeneration()를 사용하세요.

DependencyReference

Webpack에는 의존성 참조를 나타내는 단일 메소드와 유형이 있었습니다(Compilation.getDependencyReference이 DependencyReference를 반환하는 경우). 의존성 참조를 나타내는 유형은 참조된 모듈과 같이 참조에 대한 모든 정보를 포함하는 데 사용되었는데, 만약 약한 참조 및 일부 순서 관련 정보인 경우 불러온 참조된 모듈을 내보냅니다.

모든 정보를 함께 묶으면 누군가가 하나의 정보가 필요할 때마다 참조를 얻는 데 비용이 많이 들고 자주 호출되기도 합니다.

Webpack 5에서는 코드베이스의 의존성 참조 부분이 리팩토링 되었고 메소드가 분할되었습니다.

  • 참조된 모듈은 ModuleGraphConnection에서 읽을 수 있습니다.
  • 가져온 내보내기 이름은 Dependency.getReferencedExports()를 통해 가져올 수 있습니다.
  • Dependency 클래스에 weak 플래그가 있습니다.
  • 순서는 HarmonyImportDependencies에만 관련되며 sourceOrder 속성을 통해 가져올 수 있습니다.

Presentational Dependencies

이제 NormalModules에 새로운 유형의 의존성이 있습니다: 표현적 의존성

표현적 의존성은 코드 생성 단계에서만 사용되지만 모듈 그래프 빌드 중에는 사용되지 않습니다. 따라서 모듈을 참조하거나 내보내기/가져오기에 영향을 줄 수 없습니다. 표현적 의존성은 처리 비용이 저렴하고 webpack은 가능한 경우 이를 사용합니다.

Deprecated loaders

  • null-loader

    더 이상 사용되지 않고 다음과 같이 사용합니다.

    module.exports = {
  resolve: {
    alias: {
      xyz$: false,
    },
  },
};

    또는 절대 경로를 사용합니다.

    module.exports = {
  resolve: {
    alias: {
      [path.resolve(__dirname, '....')]: false,
    },
  },
};

Minor Changes

  • Compiler.name: 절대 경로로 컴파일러 이름을 생성할 때 이름의 두 부분에서 | 또는 !로 구분해야 합니다.
    • 공백을 구분 기호로 사용하는 것은 이제 더 이상 사용되지 않습니다(경로는 공백을 포함할 수 있음).
    • 힌트: |는 Stats 문자열 출력에서 공백으로 대체됩니다.
  • SystemPlugin이제 기본적으로 비활성화되어 있습니다.
    • 마이그레이션: 사양이 삭제되었으므로 사용을 피하세요. Rule.parser.system: true로 다시 활성화할 수 있습니다.
  • ModuleConcatenationPlugin: 삭제되었기 때문에 DependencyVariables에 의해 더 이상 연결이 방지되지 않습니다.
    • 삭제된 것은 이제 module, global, process 또는 ProvidePlugin의 경우에 연결할 수 있음을 의미합니다.
  • Stats.presetToOptions가 삭제되었습니다.
    • 마이그레이션: 대신 compilation.createStatsOptions를 사용합니다.
  • SingleEntryPlugin과 SingleEntryDependency가 삭제되었습니다.
    • 마이그레이션: EntryPlugin과 EntryDependency를 사용합니다.
  • 청크는 이제 여러 엔트리 모듈을 가질 수 있습니다.
  • ExtendedAPIPlugin가 삭제되었습니다.
    • 마이그레이션: 더 이상 필요하지 않습니다. __webpack_hash__와 __webpack_chunkname__을 항상 사용할 수 있으며 런타임 코드가 필요한 곳에 주입됩니다.
  • ProgressPlugin은 더 이상 reportProgress에 대해 탭가능한 컨텍스트를 사용하지 않습니다.
    • 마이그레이션: 대신 ProgressPlugin.getReporter(compiler)를 사용합니다.
  • ProvidePlugin은 이제 .mjs 파일에 대해 다시 활성화 됩니다.
  • Stats json errors및 warnings에는 더 이상 문자열이 포함되지 않지만 정보가 속성으로 분할된 객체가 포함됩니다.
    • 마이그레이션: message와 같은 속성 정보에 접근합니다.
  • Compilation.hooks.normalModuleLoader는 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 NormalModule.getCompilationHooks(compilation).loader를 사용합니다.
  • NormalModuleFactory의 훅을 워터폴에서 베일링으로 변경하고 워터폴 함수를 반환하는 훅을 변경하고 이름을 변경했습니다.
  • compilationParams.compilationDependencies가 제거되었습니다.
    • 플러그인은 compilation.file/context/missingDependencies에 추가하여 컴파일에 의존성을 추가할 수 있습니다.
    • Compat 계층은 compilationDependencies.add를 fileDependencies.add에 위임합니다.
  • stats.assetsByChunkName[x]는 이제 항상 배열입니다.
  • __webpack_get_script_filename__ 함수가 스크립트 파일의 이름을 가져오기 위해 추가되었습니다.
  • package.json의 "sideEffects"는 micromatch 대신 glob-to-regex에 의해 처리됩니다.
    • "sideEffects"는 에지 케이스에서 의미 체계를 변경했을 수 있습니다.
  • IgnorePlugin에서 checkContext가 제거되었습니다.
  • 새로운 __webpack_exports_info__ API를 사용하여 용인된 내보내기를 허용합니다.
  • SourceMapDevToolPlugin은 이제 청크가 아닌 애셋에도 적용됩니다.
  • 참조된 env 변수가 없고 대체가 없을 때 EnvironmentPlugin에 오류가 표시됩니다.
  • 스키마에서 serve 속성이 제거되었습니다.

Other Minor Changes

  • 내장된 디렉터리를 제거하고 내장된 런타임 모듈로 교체했습니다.
  • 더 이상 사용되지 않는 기능 제거
    • 이제 BannerPlugin은 객체, 문자열 또는 함수가 될 수 있는 하나의 인수만 지원합니다.
  • CachePlugin이 제거되었습니다.
  • Chunk.entryModule은 이제 더 이상 사용되지 않고, 대신 ChunkGraph를 사용합니다.
  • Chunk.hasEntryModule은 더 이상 사용되지 않습니다.
  • Chunk.addModule은 더 이상 사용되지 않습니다.
  • Chunk.removeModule은 더 이상 사용되지 않습니다.
  • Chunk.getNumberOfModules는 더 이상 사용되지 않습니다.
  • Chunk.modulesIterable은 더 이상 사용되지 않습니다.
  • Chunk.compareTo는 더 이상 사용되지 않습니다.
  • Chunk.containsModule은 더 이상 사용되지 않습니다.
  • Chunk.getModules는 더 이상 사용되지 않습니다.
  • Chunk.remove는 더 이상 사용되지 않습니다.
  • Chunk.moveModule은 더 이상 사용되지 않습니다.
  • Chunk.integrate는 더 이상 사용되지 않습니다.
  • Chunk.canBeIntegrated는 더 이상 사용되지 않습니다.
  • Chunk.isEmpty는 더 이상 사용되지 않습니다.
  • Chunk.modulesSize는 더 이상 사용되지 않습니다.
  • Chunk.size는 더 이상 사용되지 않습니다.
  • Chunk.integratedSize는 더 이상 사용되지 않습니다.
  • Chunk.getChunkModuleMaps는 더 이상 사용되지 않습니다.
  • Chunk.hasModuleInGraph는 더 이상 사용되지 않습니다.
  • Chunk.updateHash 시그니처가 변경되었습니다.
  • Chunk.getChildIdsByOrders 시그니처가 변경되었습니다(TODO: ChunkGraph로의 이동을 고려해야 합니다).
  • Chunk.getChildIdsByOrdersMap 시그니처가 변경되었습니다(TODO: ChunkGraph로의 이동을 고려해야 합니다).
  • Chunk.getChunkModuleMaps가 제거되었습니다.
  • Chunk.setModules가 제거되었습니다.
  • 더 이상 사용되지 않는 청크 메소드가 제거되었습니다.
  • ChunkGraph가 추가되었습니다.
  • ChunkGroup.setParents가 제거되었습니다.
  • ChunkGroup.containsModule가 제거되었습니다.
  • Compilation.getCache()를 위해 Compilation.cache가 제거되었습니다.
  • ChunkGroup.remove가 더 이상 블록에서 그룹 연결을 끊지 않습니다.
  • ChunkGroup.compareTo 시그니처가 변경되었습니다.
  • ChunkGroup.getChildrenByOrders 시그니처가 변경되었습니다.
  • ChunkGroup 인덱스 및 인덱스 이름이 사전/사후 순서 인덱스로 변경되었습니다.
    • 오래된 getter는 더 이상 사용되지 않습니다.
  • ChunkTemplate.hooks.modules 시그니처가 변경되었습니다.
  • ChunkTemplate.hooks.render 시그니처가 변경되었습니다.
  • ChunkTemplate.updateHashForChunk 시그니처가 변경되었습니다.
  • Compilation.hooks.optimizeChunkOrder가 제거되었습니다.
  • Compilation.hooks.optimizeModuleOrder가 제거되었습니다.
  • Compilation.hooks.advancedOptimizeModuleOrder가 제거되었습니다.
  • Compilation.hooks.optimizeDependenciesBasic이 제거되었습니다.
  • Compilation.hooks.optimizeDependenciesAdvanced가 제거되었습니다.
  • Compilation.hooks.optimizeModulesBasic이 제거되었습니다.
  • Compilation.hooks.optimizeModulesAdvanced가 제거되었습니다.
  • Compilation.hooks.optimizeChunksBasic이 제거되었습니다.
  • Compilation.hooks.optimizeChunksAdvanced가 제거되었습니다.
  • Compilation.hooks.optimizeChunkModulesBasic이 제거되었습니다.
  • Compilation.hooks.optimizeChunkModulesAdvanced가 제거되었습니다.
  • Compilation.hooks.optimizeExtractedChunksBasic이 제거되었습니다.
  • Compilation.hooks.optimizeExtractedChunks가 제거되었습니다.
  • Compilation.hooks.optimizeExtractedChunksAdvanced가 제거되었습니다.
  • Compilation.hooks.afterOptimizeExtractedChunks가 제거되었습니다.
  • Compilation.hooks.stillValidModule가 추가되었습니다.
  • Compilation.hooks.statsPreset이 추가되었습니다.
  • Compilation.hooks.statsNormalize가 추가되었습니다.
  • Compilation.hooks.statsFactory가 추가되었습니다.
  • Compilation.hooks.statsPrinter가 추가되었습니다.
  • Compilation.fileDependencies, Compilation.contextDependencies 및 Compilation.missingDependencies은 이제 LazySets 입니다.
  • Compilation.entries가 제거되었습니다.
    • 마이그레이션: 대신 Compilation.entryDependencies를 사용합니다.
  • Compilation._preparedEntrypoints가 제거되었습니다.
  • dependencyTemplates는 이제 raw Map 대신 DependencyTemplates 클래스입니다.
  • Compilation.fileTimestamps와 contextTimestamps가 제거되었습니다.
    • 마이그레이션: 대신 Compilation.fileSystemInfo를 사용합니다.
  • Compilation.waitForBuildingFinished가 제거되었습니다.
    • 마이그레이션: 새 대기열을 사용합니다.
  • Compilation.addModuleDependencies가 제거되었습니다.
  • Compilation.prefetch가 제거되었습니다.
  • Compilation.hooks.beforeHash는 이제 모듈의 해시가 생성된 후 호출됩니다.
    • 마이그레이션: 대신 Compiliation.hooks.beforeModuleHash를 사용합니다.
  • Compilation.applyModuleIds가 제거되었습니다.
  • Compilation.applyChunkIds가 제거되었습니다.
  • 루트 컴파일러를 가리키는 Compiler.root가 추가되었습니다.
    • 정적 범위 대신 WeakMaps에서 데이터를 캐시하는 데 사용할 수 있습니다.
  • Compiler.hooks.afterDone이 추가되었습니다.
  • Source.emitted는 더 이상 컴파일러에 의해 설정되지 않습니다.
    • 마이그레이션: 대신 Compilation.emittedAssets를 확인합니다.
  • Compiler/Compilation.compilerPath가 추가되었습니다: 컴파일러 트리에서 컴파일러의 고유한 이름입니다(루트 컴파일러 유효범위 고유).
  • Module.needRebuild는 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 Module.needBuild를 사용합니다.
  • Dependency.getReference 시그니처가 변경되었습니다.
  • Dependency.getExports 시그니처가 변경되었습니다.
  • Dependency.getWarnings 시그니처가 변경되었습니다.
  • Dependency.getErrors 시그니처가 변경되었습니다.
  • Dependency.updateHash 시그니처가 변경되었습니다.
  • Dependency.module이 제거되었습니다.
  • 이제 DependencyTemplate에 대한 기본 클래스가 있습니다.
  • MultiEntryDependency가 제거되었습니다.
  • EntryDependency가 추가되었습니다.
  • EntryModuleNotFoundError가 제거되었습니다.
  • SingleEntryPlugin이 제거되었습니다.
  • EntryPlugin이 추가되었습니다.
  • Generator.getTypes가 추가되었습니다.
  • Generator.getSize가 추가되었습니다.
  • Generator.generate 시그니처가 변경되었습니다.
  • HotModuleReplacementPlugin.getParserHooks가 추가되었습니다.
  • Parser가 JavascriptParser로 이동되었습니다.
  • ParserHelpers가 JavascriptParserHelpers로 이동되었습니다.
  • MainTemplate.hooks.moduleObj가 제거되었습니다.
  • MainTemplate.hooks.currentHash가 제거되었습니다.
  • MainTemplate.hooks.addModule이 제거되었습니다.
  • MainTemplate.hooks.requireEnsure가 제거되었습니다.
  • MainTemplate.hooks.globalHashPaths가 제거되었습니다.
  • MainTemplate.hooks.globalHash가 제거되었습니다.
  • MainTemplate.hooks.hotBootstrap이 제거되었습니다.
  • MainTemplate.hooks 일부 시그니처가 변경되었습니다.
  • Module.hash는 더 이상 사용되지 않습니다.
  • Module.renderedHash는 더 이상 사용되지 않습니다.
  • Module.reasons가 제거되었습니다.
  • Module.id는 더 이상 사용되지 않습니다.
  • Module.index는 더 이상 사용되지 않습니다.
  • Module.index2는 더 이상 사용되지 않습니다.
  • Module.depth는 더 이상 사용되지 않습니다.
  • Module.issuer는 더 이상 사용되지 않습니다.
  • Module.profile이 제거되었습니다.
  • Module.prefetched가 제거되었습니다.
  • Module.built가 제거되었습니다.
  • Module.used가 제거되었습니다.
    • 마이그레이션: 대신 Module.getUsedExports를 사용합니다.
  • Module.usedExports는 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 Module.getUsedExports를 사용합니다.
  • Module.optimizationBailout은 더 이상 사용되지 않습니다.
  • Module.exportsArgument가 제거되었습니다.
  • Module.optional은 더 이상 사용되지 않습니다.
  • Module.disconnect가 제거되었습니다.
  • Module.unseal이 제거되었습니다.
  • Module.setChunks가 제거되었습니다.
  • Module.addChunk는 더 이상 사용되지 않습니다.
  • Module.removeChunk는 더 이상 사용되지 않습니다.
  • Module.isInChunk는 더 이상 사용되지 않습니다.
  • Module.isEntryModule은 더 이상 사용되지 않습니다.
  • Module.getChunks는 더 이상 사용되지 않습니다.
  • Module.getNumberOfChunks는 더 이상 사용되지 않습니다.
  • Module.chunksIterable은 더 이상 사용되지 않습니다.
  • Module.hasEqualsChunks가 제거되었습니다.
  • Module.useSourceMap이 NormalModule로 이동했습니다.
  • Module.addReason이 제거되었습니다.
  • Module.removeReason이 제거되었습니다.
  • Module.rewriteChunkInReasons이 제거되었습니다.
  • Module.isUsed가 제거되었습니다.
    • 마이그레이션: 대신 isModuleUsed, isExportUsed 또는 getUsedName를 사용합니다.
  • Module.updateHash 시그니처가 변경되었습니다.
  • Module.sortItems가 제거되었습니다.
  • Module.unbuild가 제거되었습니다.
    • 마이그레이션: 대신 invalidateBuild를 사용합니다.
  • Module.getSourceTypes가 추가되었습니다.
  • Module.getRuntimeRequirements가 추가되었습니다.
  • Module.size 시그니처가 변경되었습니다.
  • ModuleFilenameHelpers.createFilename 시그니처가 변경되었습니다.
  • ModuleProfile 클래스에 더 많은 데이터가 추가되었습니다.
  • ModuleReason이 제거되었습니다.
  • ModuleTemplate.hooks 시그니처가 변경되었습니다.
  • ModuleTemplate.render 시그니처가 변경되었습니다.
  • Compiler.dependencies가 제거되었습니다.
    • 마이그레이션: 대신 MultiCompiler.setDependencies를 사용합니다.
  • MultiModule이 제거되었습니다.
  • MultiModuleFactory가 제거되었습니다.
  • NormalModuleFactory.fileDependencies, NormalModuleFactory.contextDependencies 및 NormalModuleFactory.missingDependencies는 이제 LazySets 입니다.
  • RuntimeTemplate 메소드는 이제 runtimeRequirements 인수를 사용합니다.
  • serve 속성이 제거되었습니다.
  • Stats.jsonToString이 제거되었습니다.
  • Stats.filterWarnings가 제거되었습니다.
  • Stats.getChildOptions가 제거되었습니다.
  • Stats 도우미 메소드가 제거되었습니다.
  • Stats.toJson 시그니처가 변경되었습니다(두번째 인수가 제거되었습니다).
  • ExternalModule.external이 제거되었습니다.
  • HarmonyInitDependency가 제거되었습니다.
  • Dependency.getInitFragments는 더 이상 사용되지 않습니다.
    • 마이그레이션: 대신 apply initFragements를 사용합니다.
  • DependencyReference는 이제 모듈 대신 모듈에 대한 함수를 사용합니다.
  • HarmonyImportSpecifierDependency.redirectedId가 제거되었습니다.
    • 마이그레이션: 대신 setId를 사용합니다.
  • acorn이 5 -> 8로 변경되었습니다.
  • Testing
    • HotTestCases는 이제 여러 대상 async-node node web webworker에 대해 실행됩니다.
    • TestCases는 이제 store: "instant" 및 store: "pack"을 사용하여 파일 시스템 캐싱에 대해서도 실행됩니다.
    • TestCases 이제 결정적 모듈 ID에 대해서도 실행됩니다.
  • 가져오기 순서를 위한 툴링을 추가하였습니다(CI에서 확인하실 수 있습니다).
  • 청크 이름이 청크 ID와 같을 때 런타임의 청크 이름 매핑에 더 이상 엔트리가 포함되지 않습니다.
  • 유효범위 호이스팅과 같은 최적화 전에 모듈을 가리키는 통계를 위하여 resolvedModuleId resolvedModuleIdentifier 및 resolvedModule가 추가되었습니다.
  • Stats toString 출력에 resolvedModule가 표시됩니다.
  • loader-runner가 업그레이드되었습니다: https://github.com/webpack/loader-runner/releases/tag/v3.0.0
  • Compilation의 file/context/missingDependencies는 더 이상 성능상의 이유로 정렬되지 않습니다.
    • 명령에 의존하지 않습니다.
  • webpack-sources가 버전 2로 업그레이드되었습니다: https://github.com/webpack/webpack-sources/releases/tag/v2.0.1
  • webpack-command 지원이 제거되었습니다.
  • 스키마 유효성 검사를 위하여 schema-utils@2가 사옹됩니다.
  • Compiler.assetEmitted에는 더 많은 정보가 포함된 향상된 두 번째 인수를 가집니다.
  • BannerPlugin은 후행 공백을 생략합니다.
  • LimitChunkCountPlugin에서 minChunkSize옵션이 제거되었습니다.
  • 자바스크립트 관련 파일을 하위 디렉터리로 재구성하였습니다.
    • webpack.JavascriptModulesPlugin -> webpack.javascript.JavascriptModulesPlugin
  • Logger.getChildLogger가 추가되었습니다.
  • DllPlugin의 entryOnly 기본값을 true로 변경하였습니다.
  • 특수 요청 단축 로직을 제거하고 읽기 가능한 모듈 이름에 대해 단일 상대 경로를 사용합니다.
  • SourceMaps의 webpack:// url이 webpack 루트 컨텍스트와 관련된 경로를 제공하도록 허용합니다.
  • Webpack 구성을 대상으로 하는 CLI 인수를 생성 및 처리하는 API를 추가하였습니다.
  • System.js를 libraryTarget으로 사용할 때 System.js의 컨텍스트로 __system_context__를 추가하였습니다.
  • DefinePlugin에 대한 bigint 지원을 추가하였습니다.
  • 수학과 같은 기본적 평가에 대한 bigint 지원을 추가하였습니다.
  • 해시가 생성된 후 컴파일 해시를 수정하는 기능을 제거하였습니다.
  • HotModuleReplacementPlugin의 다단계 모드를 제거하였습니다.
  • 이제 emitAsset의 assetInfo가 중첩된 객체 또는 배열을 사용할 때 병합됩니다.
  • 애셋과 같은 filename을 기반으로 하는 경로의 경우 [query]가 이제 유효한 플레이스홀더입니다.
  • 애셋 및 비공유 관련 애셋을 올바르게 삭제하려면 Compilation.deleteAsset을 추가하세요.
  • require("webpack-sources")가 require("webpack").sources로 보입니다.
  • terser 5
  • Webpack은 문장 시작시 대문자 W로 작성할 수 있습니다.
Edit this page·Print this page
« Previous
Roadmap 2021 (2020-12-08)

2 Contributors

sokrachenxsan

Translators

JEONTAK JEONTAK