Webpack 4는 2018년 2월에 릴리스했습니다. 2018년 2월 이후로 큰 변화 없이 많은 기능을 릴리스했습니다. 여러 사람이 큰 변화가 있는 주요 변경사항을 싫어한다는 것을 알고 있습니다. 특히 webpack의 경우, 일반적으로 1년에 2번만 사용하고 남은 시간 동안 "단지 작동"만 합니다. 그러나 큰 변화가 없는 제공된 기능에도 비용이 발생합니다. 따라서 주요 API 또는 구조적 개선을 할 수 없습니다.
그래서 가끔 어려운 파일이 쌓이고 모든 것을 엉망으로 만들지 않기 위해 큰 변화를 해야 하는 시점이 있습니다. 큰 변화가 필요한 시점이 새 주요 버전이 필요한 시점입니다. 따라서 webpack 5는 구조적 개선과 구조적 개선 없이는 구현이 가능하지 않은 특징을 포함합니다.
주요 버전은 또한 일부 기본값을 수정하고 그동안 나오는 제안과 사양을 일치시킬 수 있는 기회였습니다.
그래서 오늘(2020-10-10) webpack 5.0.0이 릴리스했지만, 버그가 없거나 기능이 완전하다는 것을 의미하지는 않습니다. Webpack 4와 마찬가지로 문제를 수정하고 기능을 추가하여 개발을 계속합니다. 다음 날에는 아마도 많은 버그 수정이 있을 것입니다. 기능은 나중에 제공합니다.
릴리스는 주요 변경 작업이 완료했다는 것을 의미합니다. 아키텍처를 업그레이드하고 향후 기능(및 현재 기능)을 위한 좋은 기반을 만들기 위해 많은 리팩토링이 수행되었습니다.
때에 따라 다릅니다. 업그레이드가 실패할 가능성이 높으며 두 번째 또는 세 번째 시도를 해야 합니다. 그래도 상관없다면, 지금 업그레이드를 시도하고 webpack, 플러그인과 로더에 피드백을 제공해 주세요. 업그레이드가 실패하는 문제를 해결하기 위해 열심히 하고 있습니다. 누군가는 시작해야 하고 당신이 문제를 해결하는 것으로부터 혜택을 받는 첫 번째 사람 중 하나가 될 것입니다.
Webpack은 전적으로 후원을 기반으로 합니다. 다른 오픈소스 프로젝트와 같이 대기업이 후원하거나 대기업에 연결되어 있지 않습니다. 후원 수익의 99%는 기여도에 따라 컨트리뷰터와 메인테이너에게 분배됩니다. Webpack을 개선하기 위해 돈을 투자한다고 믿습니다.
그러나 팬데믹이 있고 나서 여러 기업은 더 이상 후원에 개방적이지 않습니다. Webpack도 이러한 상황에서 (많은 다른 회사 및 여러 사람과 마찬가지로) 어려움을 겪고 있습니다.
컨트리뷰터에게 적절한 금액을 지불할 수 없었지만 지금은 사용할 수 있는 돈이 절반밖에 없기 때문에 더 많은 삭감이 필요합니다. 상황이 개선될 때까지 매월 첫 10일 동안만 컨트리뷰터와 메인테이너에게만 비용을 드립니다. 나머지 날은 자발적으로 일하거나, 고용주가 지불하거나, 다른 일을 하거나, 며칠을 쉴 수 있습니다. 이를 통해 처음 10일 동안 일에 투자한 시간과 동등하게 비용을 드릴 수 있습니다.
가장 큰 "감사 합니다"는 지난 3년 동안 엄청난 금액으로 webpack을 후원해 온 trivago에게 돌아갑니다. 안타깝게도 trivago는 올해 코로나19로 인해 후원을 이어가지 못하고 있습니다. 다른 회사가 나서서 이 거대한 발자취를 따르기를 바랍니다.
모든 후원자에 감사드립니다.
이 릴리스는 다음 항목에 중점을 둡니다.
v4에서 더 이상 지원되지 않는 모든 항목이 제거되었습니다.
마이그레이션: webpack 4 빌드가 지원 중단 경고를 인쇄하지 않는지 확인하세요.
다음은 v4에서 제거되었지만 지원 중단 경고가 없는 몇 가지 사항입니다.
새로운 지원 중단에는 더 쉽게 참조할 수 있도록 지원 중단 코드가 포함됩니다.
require.include
는 더 이상 지원되지 않으며 사용 시 기본적으로 경고를 표시합니다.
Rule.parser.requireInclude
를 사용하여 동작을 허용, 지원 중단, 또는 비활성화로 변경할 수 있습니다.
초기에 webpack의 목표는 브라우저에서 대부분의 Node.js 모듈을 실행할 수 있도록 하는 것이었지만 모듈 환경이 바뀌었고 많은 모듈 사용이 이제 주로 프런트엔드 목적으로 작성되었습니다. v4 이하 webpack은 수많은 Node.js 코어 모듈에 대한 폴리필과 함께 제공하며, 모듈이 코어 모듈(즉 crypto
모듈)을 사용하면 자동으로 적용됩니다.
폴리필과 함께 제공하면 Node.js 용으로 작성된 모듈을 더 쉽게 사용할 수 있지만 거대한 폴리필이 번들에 추가됩니다. 많은 경우 폴리필은 필요하지 않습니다.
Webpack 5는 코어 모듈을 자동으로 폴리필하는 것을 중지하고 프런트엔드 호환 모듈에 중점을 둡니다. 목표는 Node.js 코어 모듈을 사용할 수 없는 웹 플랫폼과의 호환성을 개선하는 것입니다.
마이그레이션:
package.json
의 browser
필드를 사용하여 패키지 프런트엔드와 호환되도록 합니다. 브라우저에 대한 대체 구현/의존성을 제공합니다.장기 캐싱을 위해 새로운 알고리즘을 추가했습니다. 프로덕션 모드에서는 기본적으로 활성화되어 있습니다.
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에서 deterministic
ID는 기본적으로 프로덕션 모드에서 활성화됩니다.
Webpack 5는 이제 [contenthash]
를 사용할 때 파일 콘텐츠의 실제 해시를 사용합니다. 그전에는 "오직"내부 구조의 해시를 사용했습니다.
실제 해시를 사용하는 것은 주석만 변경되거나 변수 이름이 변경된 경우 장기 캐싱에 긍정적인 영향을 미칠 수 있습니다. 이러한 변경 사항은 최소화 한 후에는 표시되지 않습니다.
개발 모드에서 기본적으로 활성화된 새로운 명명된 청크 ID 알고리즘은 청크(및 파일 이름)에 사람이 읽을 수 있는 이름을 제공합니다.
모듈 ID는 context
에 상대적인 경로에 따라 결정됩니다.
청크 ID는 청크에 콘텐츠에 따라 결정됩니다.
따라서 더 이상 디버깅을 위해 import(/* webpackChunkName: "name" */ "module")
을 사용할 필요가 없습니다.
그러나 프로덕션 환경의 파일 이름을 제어하려는 경우 의미가 있습니다.
프로덕션에서 chunkIds: "named"
를 사용할 수 있지만 실수로 모듈 이름에 대한 민감한 정보를 나타내지 않도록 하세요.
마이그레이션: 개발 중에 변경된 파일 이름이 마음에 들지 않으면 chunkIds: "natural"
를 전달하여 이전 숫자 모드를 사용할 수 있습니다.
Webpack 5에는 "Module Federation"이라는 새로운 기능이 추가되어 webpack 빌드가 함께 작동할 수 있습니다. 런타임 관점에서 여러 빌드의 모듈은 연결된 거대한 모듈 그래프처럼 작동합니다. 개발자 관점에서 모듈은 지정된 원격 빌드에서 가져와 최소한의 제한으로 사용할 수 있습니다.
자세한 내용은 별도 가이드를 참고하세요.
JSON 모듈은 이제 제안과 일치하고 기본이 아닌 export가 사용되는 경우 경고를 내보냅니다. 엄격한 ECMAScript 모듈에서 가져올 때 JSON 모듈에 더 이상 명명된 export가 없습니다.
마이그레이션: 기본 export를 사용합니다.
기본 export를 사용하는 경우에도 optimization.usedExports
최적화에 의해 사용되지 않은 속성이 삭제되고 optimization.mangleExports
최적화에 의해 속성이 맹글링됩니다.
Rule.parser.parse
에 커스텀 JSON 파서를 지정하여 JSON과 유사한 파일(예: toml, yaml, json5 등)을 가져올 수 있습니다.
import.meta.webpackHot
은 엄격한 ESM에서도 사용할 수 있는 module.hot
의 별칭입니다.import.meta.webpack
은 webpack의 주요 버전을 숫자로 나타냅니다.import.meta.url
은 file:
현재 파일의 URL 입니다(__filename
과 유사하지만 파일 URL로 사용).Webpack 5는 이제 애셋을 나타내는 모듈을 기본적으로 지원합니다. 애셋을 나타니는 모듈은 파일을 출력 폴더로 내보내거나 DataURI를 자바스크립트 번들에 삽입합니다. 어느 쪽이든 작업할 URL을 제공합니다.
여러 가지 방법으로 사용할 수 있습니다.
import url from "./image.png"
과 같은 import를 일치시킬 때 module.rules
에서 type: "asset"
을 설정합니다(옛날 방식).new URL("./image.png", import.meta.url)
(새로운 방식)"새로운 방식" 구문은 번들러 없이도 코드를 실행할 수 있도록 결정되었습니다. 이 구문은 브라우저의 네이티브 ECMAScript 모듈에서도 사용할 수 있습니다.
애셋에 대한 new URL
을 new Worker
/new SharedWorker
/navigator.serviceWorker.register
와 결합하면 webpack이 웹 worker를 위한 새 엔트리 포인트를 자동으로 생성합니다.
new Worker(new URL("./worker.js", import.meta.url))
번들러 없이도 코드를 실행할 수 있도록 구문이 결정되었습니다. 이 구문은 브라우저의 네이티브 ECMAScript 모듈에서도 사용할 수 있습니다.
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()
을 통한 옵트인이 필요합니다.
요청의 프래그먼트가 지원됩니다. 예시: ./file.js#fragment
Webpack 5는 소위 "비동기 모듈"을 지원합니다. 이는 동기적으로 평가되지 않지만 대신 비동기 및 Promise 기반 모듈입니다.
import
를 통한 가져오기는 자동으로 처리되고 추가 구문이 필요하지 않으며 차이점을 거의 알아차릴 수 없습니다.
require()
를 통해 가져오면 export로 해결되는 promise가 리턴됩니다.
Webpack에는 비동기 모듈을 사용하는 여러 가지 방법이 있습니다.
Webpack 5는 더 많은 애플리케이션을 포함하기 위해 추가 external 유형을 추가합니다.
promise
: promise로 평가되는 표현식입니다. External 모듈은 비동기 모듈이며 해석된 값은 모듈 export로 사용됩니다.
import
: 네이티브 import()
는 지정된 요청을 로드하는 데 사용됩니다. External 모듈은 비동기 모듈입니다.
module
: 아직 구현되지 않았지만 import x from "..."
을 통해 모듈을 로드할 계획입니다.
script
: <script>
태그를 통해 URL을 로드하고 전역 변수(및 선택적으로 전역 변수의 속성)에서 export를 가져옵니다. External 모듈은 비동기 모듈입니다.
이제 package.json의 exports
와 imports
필드가 지원됩니다.
Yarn PnP는 기본적으로 지원됩니다.
자세한 내용은 패키지 export를 참고하세요.
Webpack 5는 타겟 리스트를 전달할 수 있으며 타겟 버전도 지원합니다.
예: target: "node14"
target: ["web", "es2020"]
타겟 버전 지원을 통해 webpack이 결정하는 데 필요한 모든 정보를 제공할 수 있습니다.
통계 테스트 형식이 가독성 및 자세한 내용과 관련하여 개선되었습니다. 기본값은 덜 장황하고 대규모 빌드에도 적합하도록 개선되었습니다.
stats.chunkRelations
로 토글할 수 있습니다.files
와 auxiliaryFiles
를 구분합니다.stats.ids
로 토글할 수 있습니다.stats.modulesSort
로 변경할 수 있습니다.stats.chunkModulesSort
로 변경할 수 있습니다.stats.nestedModulesSort
로 변경할 수 있습니다.stats.hash
로 변경할 수 있습니다.stats.builtAt
로 활성화 할 수 있습니다. 요약에 타임 스탬프가 표시됩니다.stats.children
으로 표시할 수 있습니다.CLI에서 --progress
에 사용하지만 플러그인에서 수동으로 사용할 수도 있는 ProgressPlugin
에 몇 가지 개선 사항이 적용되었습니다.
처리된 모듈만 계산하는 데 사용되었습니다. 이제 entries
dependencies
및 modules
을 계산할 수 있습니다.
이제 모두 기본적으로 표시됩니다.
현재 처리된 모듈을 표시하는 데 사용됩니다. 이로 인해 많은 stderr 출력이 발생하고 일부 콘솔에서 성능 문제가 발생했습니다.
이제 기본적으로 비활성화되어 있습니다(activeModules
옵션). 또한 콘솔의 스팸 양을 줄입니다.
이제 모듈을 빌드하는 동안 stderr에 쓰는 것이 500ms로 제한됩니다.
프로파일링 모드도 업그레이드 되었으며 중첩된 진행 메세지의 타이밍을 표시합니다. 성능 문제를 일으키는 플러그인을 쉽게 파악할 수 있습니다.
새로 추가된 percentBy
-옵션은 ProgressPlugin
에 진행률을 계산하는 방법을 알려줍니다.
new webpack.ProgressPlugin({ percentBy: 'entries' });
진행률을 보다 정확하게 만들기 위해 ProgressPlugin
은 마지막으로 알려진 총 모듈 수를 캐시하고 다음 빌드에서 총 모듈 수 값을 재사용 합니다. 첫 번째 빌드는 캐시를 워밍업하지만 다음 빌드는 캐시를 사용하고 업데이트합니다.
청크 로드에 동일한 전역 변수를 사용하기 때문에 webpack 4에서 여러 webpack 런타임은 동일한 HTML 페이지에서 충돌할 수 있습니다. 이 문제를 수정하려면 output.jsonpFunction
구성에 커스텀 이름을 제공해야 합니다.
Webpack 5는 package.json
및 name
에서 빌드의 고유 이름을 자동으로 유추하고 이를 output.uniqueName
의 기본값으로 사용합니다.
output.uniqueName
값은 잠재적으로 충돌하는 모든 전역을 고유하게 만드는 데 사용됩니다.
마이그레이션: package.json
의 고유한 이름을 위해 output.jsonpFunction
을 제거합니다.
Webpack 5는 가능한 경우 output.publicPath
을 자동으로 결정합니다.
Webpack 5는 소스 코드에서 타입을 생성하고 npm 패키지를 통해 나타냅니다.
마이그레이션: @types/webpack
을 제거합니다. 이름이 다른 경우 참조를 업데이트하세요.
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
는 프로덕션 모드에서 제거될 수 있습니다.
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__*/
표현식피드백: 분석에서 누락된 것을 발견하고 문제를 보고해 주시면 추가를 고려하겠습니다.
평가된 코드가 범위 내의 모든 기호를 참조할 수 있기 때문에 eval()
을 사용하면 모듈에 대한 최적화를 구제할 수 있습니다.
내부 모듈 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()
require()
Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0 })
exports|this|module.exports.__esModule = true|!0
분석할 수 없는 코드를 감지하면 성능상의 이유로 webpack은 모듈에 대한 export 정보를 구제하고 전혀 추적하지 않습니다.
package.json의 "sideEffects"
플래그를 사용하면 수동으로 모듈에 부작용이 없는 플래그를 지정할 수 있으므로 사용하지 않을 때 모듈을 삭제할 수 있습니다.
또한 webpack 5는 소스 코드의 정적 분석에 따라 모듈에 부작용이 없는 것으로 자동 플래그를 지정할 수 있습니다.
이제 webpack 5는 런타임당 모듈을 분석하고 최적화할 수 있고 기본적으로 수행합니다(런타임은 종종 엔트리 포인트와 같습니다). 실제로 필요한 엔트리 포인트에서만 import할 수 있습니다. 엔트리 포인트는 엔트리 포인트 당 런타임을 사용하는 한 서로 영향을 미치지 않습니다.
모듈 연결은 런타임별로 작동하여 각 런타임에 대해 서로 다른 연결을 허용합니다.
모듈 연결은 일급 객체가 되었으며 이제 모든 모듈 및 의존성이 모듈 연결을 구현할 수 있습니다. 처음에 webpack 5는 ExternalModules 및 json 모듈에 대한 지원을 이미 추가했으며 곧 더 많이 제공할 예정입니다.
export *
가 더 많은 정보를 추적하고 더 이상 default
export를 사용된 것으로 표시하지 않도록 개선되었습니다.
export *
는 이제 webpack이 충돌하는 export가 있다고 확신할 때 경고를 표시합니다.
import()
를 사용하면 /* webpackExports: ["abc", "default"] */
마법 주석을 통해 모듈을 수동으로 tree shake 할 수 있습니다.
개발 모드에서의 빌드 성능과 두 모드 간의 유사성을 개선하여 프로덕션 전용 문제를 피하는 것 사이에서 좋은 절충안을 찾으려고 노력합니다.
Webpack 5는 기본적으로 두 모드 모두에서 sideEffects
최적화를 활성화합니다. Webpack 4에서 sideEffects
최적화는 package.json의 잘못된 "sideEffects"
플래그로 인해 일부 프로덕션 전용 오류로 이어집니다. 개발에서 sideEffects
최적화를 활성화하면 이러한 문제를 더 빠르고 쉽게 찾을 수 있습니다.
대부분의 경우 개발 및 프로덕션은 파일 시스템의 대소문자 구분이 다른 OS에서 발생하므로 webpack 5는 대소문자가 이상한 경우 몇 가지 경고/오류를 추가합니다.
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
선언을 사용하여 더 많은 사양 준수 코드를 생성합니다.
target
optionWebpack 4에서 target
은 "web"
과 "node"
및 몇 가지 다른 것들 사이에서 대략적인 선택이었습니다.
Webpack 5는 여기에 더 많은 옵션을 제공합니다.
target
옵션은 이제 생성된 코드에 대해 이전보다 더 많은 영향을 미칩니다.
externals
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 }
를 사용합니다).이제 모듈은 단일 숫자보다 더 나은 방식으로 크기를 표현합니다. 이제 다양한 유형의 크기가 있습니다.
SplitChunksPlugin은 이제 이런 다양한 크기를 처리하는 방법을 알고 있으며 이를 minSize
및 maxSize
에 사용합니다.
기본적으로 javascript
크기만 처리되지만 이제 여러 값을 전달하여 관리할 수 있습니다.
module.exports = {
optimization: {
splitChunks: {
minSize: {
javascript: 30000,
webassembly: 50000,
},
},
},
};
여전히 크기에 단일 숫자를 사용할 수 있습니다. 이 경우 webpack은 자동으로 기본 크기 유형을 사용합니다.
mini-css-extract-plugin
은 css/mini-extra
를 크기 유형으로 사용하고 크기 유형을 기본 유형에 자동으로 추가합니다.
이제 파일 시스템 캐시가 있습니다. 옵트인이며 다음 구성으로 활성화할 수 있습니다.
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에서도 영구 캐싱을 사용할 수 있습니다.
이제 컴파일러는 사용한 후 닫아야 합니다. 컴파일러는 이제 유휴 상태로 들어가고 나가며 이러한 상태에 대한 훅을 갖습니다. 플러그인은 상태에 대한 훅을 사용하여 중요하지 않은 작업을 수행할 수 있습니다. 즉, 영구 캐시는 캐시를 디스크에 천천히 저장합니다. 컴파일러 종료 시 - 나머지 모든 작업은 가능한 빨리 완료되어야 합니다. 콜백은 종료 신호를 보냅니다.
플러그인과 해당 작성자는 일부 사용자가 컴파일러를 닫는 것을 잊어버릴 수 있음을 예상해야 합니다. 따라서 모든 작업은 유휴 상태에서도 완료되어야 합니다. 작업이 완료될 때 프로세스가 종료되지 않도록 해야 합니다.
webpack()
파사드는 콜백이 전달될 때 자동으로 close
를 호출합니다.
마이그레이션: Node.js API를 사용하는 동안 컴파일러가 완료되면 Compiler.close
를 호출해야 합니다.
Webpack은 첫 번째 빌드 중에 항상 모든 출력 파일을 내보내는 데 사용되었지만 증분 빌드 중에 변경되지 않은 파일 쓰기를 건너뛰었습니다. Webpack이 실행되는 동안 다른 어떤 것도 출력 파일을 변경하지 않는다고 가정합니다.
영구 캐싱이 추가되면 wepback 프로세스를 다시 시작할 때도 시계와 같은 경험이 제공되어야 하지만 wepback이 실행되지 않을 때 출력 디렉터리가 변경되지 않는다고 생각하는 것은 지나친 가정입니다.
따라서 wepback은 이제 출력 디렉터리의 기존 파일을 확인하고 파일의 내용을 메모리의 출력 파일과 비교합니다. 파일이 변경된 경우에만 기록합니다. 비교하는 것은 첫 번째 빌드에서만 수행됩니다. 모든 증분 빌드는 실행 중인 webpack 프로세스에서 새 애셋이 생성될 때 항상 파일을 작성합니다.
Webpack과 플러그인은 콘텐츠가 변경된 경우에만 새 애셋을 생성한다고 가정합니다. 입력이 같을 때 새 애셋이 생성되지 않도록 하려면 캐싱을 사용해야 합니다. 위 조언을 따르지 않으면 성능이 저하됩니다.
콘텐츠 해시를 포함하고 있는 [immutable]
플래그가 지정된 파일은 동일한 이름의 파일이 이미 존재하는 경우 절대 작성되지 않습니다.
파일 콘텐츠가 변경되면 콘텐츠 해시가 변경된다고 가정합니다.
위 가정은 일반적으로 참이지만 wepback이나 플러그인 개발 중에는 항상 참이 아닐 수도 있습니다.
타겟 파일 시작만 허용하는 대상(예: node, WebWorker, electron main)은 이제 런타임에 의해 자동으로 부트스트랩하는 데 필요한 종속 조각 로드를 지원합니다.
지원할 경우 chunks: "all"
및 optimization.runtimeChunk
가 있는 타겟에 대하여 opimization.splitChunks
를 사용할 수 있습니다.
청크 로딩이 비동기인 타겟의 경우 초기 평가도 비동기화됩니다. 이제 내보낸 값이 Promise이기 때문에 output.library
를 사용할 때 문제가 될 수 있습니다.
enhanced-resolve
가 v5로 업데이트되었습니다. 다음과 같은 개선 사항이 있습니다.
false
에 대한 앨리어싱이 가능합니다.exports
및 imports
필드와 같은 기능을 지원합니다.JS 코드가 포함되지 않은 청크는 더 이상 JS 파일을 생성하지 않습니다. 위와 같은 경우 CSS만 포함하는 청크를 가질 수 있습니다.
모든 기능이 처음부터 안정적인 것은 아닙니다. Webpack 4에서 실험적 기능을 추가하고 체인지로그에 실험적이라고 언급했지만 실험적이라는 구성이 항상 명확한 것은 아닙니다.
Webpack 5에는 실험 기능을 활성화할 수 있는 새로운 experiments
설정 옵션이 있습니다. 새로운 설정 옵션으로 활성화/사용되는 항목이 명확해집니다.
Webpack은 의미론적 버전 관리를 따르지만 실험적 기능에 대해서는 예외가 됩니다. 실험적 기능에는 마이너 webpack 버전의 주요 변경 사항이 포함될 수 있습니다. 주요 변경 사항이 포함될 경우 변경 로그에 명확한 메모를 추가합니다. 메모를 추가함으로써 실험적 기능을 더 빠르게 반복할 수 있으며 안정적인 기능을 위해 메이저 버전을 더 오래 유지할 수 있습니다.
다음 실험은 webpack 5와 함께 제공됩니다.
experiments.syncWebAssembly
)experiments.asyncWebAssembly
)
experiments.topLevelAwait
)
await
를 사용하면 모듈을 비동기 모듈로 만듭니다.experiments.outputModule
)
<script type="module">
을 통해 지연 로드하고 모듈 모드에서 최소화했습니다.또한 WebAssembly 지원이 이제 기본적으로 비활성화되어 있음을 의미합니다.
지원되는 최소 Node.js 버전이 6에서 10.13.0(LTS)으로 증가했습니다.
마이그레이션: 사용 가능한 최신 Node.js 버전으로 업그레이드하세요.
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.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"
제거됨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]
를 사용합니다.[name]
[base]
[path]
[ext]
externals
는 이제 다른 특징을 갖습니다({ context, request }, callback)
.
externalsPresets
추가됨experiments
추가됨 (위의 실험 섹션 참조)watchOptions.followSymlinks
추가됨watchOptions.ignored
는 이제 정규 표현식이 될 수 있습니다.webpack.util.serialization
가 이제 나타납니다.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
로 설정됩니다.this.getOptions
새로운 API는 로더의 옵션 사용을 단순화해야 합니다. 유효성 검사를 위해 JSON 스키마를 전달할 수 있습니다. 자세한 내용은 PR을 참고하세요.
this.exec
this.exec
은 로더 컨텍스트에서 제거되었습니다.
마이그레이션: 로더 자체에서 구현할 수 있습니다.
this.getResolve
로더 API의 getResolve(options)
다른 방식으로 옵션을 병합합니다. module.rules
resolve
를 참고하세요.
Webpack 5는 발행 의존성마다 다르기 때문에 dependencyType
를 옵션으로 전달하는 것이 합리적일 수 있습니다.(예:"esm"
, "commonjs"
또는 기타).
다음 변경 사항은 플러그인 작성자에게만 해당합니다.
이제 webpack 5의 플러그인은 설정 기본값이 적용되기전에 적용됩니다. 위의 내용을 통하여 플러그인이 자체 기본값을 적용하거나 사전 설정으로 작동할 수 있습니다.
그러나 플러그인이 적용될 때 설정할 설정값에 의존할 수 없기 때문에 New plugin order 또한 주요 변경 사항입니다.
마이그레이션: 플러그인 훅에서만 설정에 액세스합니다. 또는 설정에 대한 액세스를 무조건 피하고 생성자를 통해 옵션을 사용하는 것이 가장 좋습니다.
런타임 코드의 상당 부분이 소위 "런타임 모듈"로 옮겨졌습니다. "런타임 모듈"과 같은 특수 모듈은 런타임 코드를 추가하는 역할을 합니다. 모든 청크에 추가할 수 있지만 현재는 항상 런타임 청크에 추가됩니다. "런타임 요구사항"이 번들에 추가되는 런타임 모듈 또는 코어 런타임 부분을 제어함으로써 사용되는 런타임 코드만 번들에 추가됩니다. 향후 필요할 때 런타임 코드를 로드하기 위해 런타임 모듈을 주문형 로드 청크에 추가할 수도 있습니다.
대부분의 경우 코어 런타임은 엔트리 모듈을 __webpack_require__
로 호출하는 대신 인라인할 수 있습니다. 번들에 다른 모듈이 없으면 __webpack_require__
가 전혀 필요하지 않습니다. __webpack_require__
는 여러 모듈이 단일 모듈로 연결되는 모듈 연결과 잘 결합됩니다.
최상의 경우 런타임 코드가 전혀 필요하지 않습니다.
마이그레이션: 플러그인의 webpack 런타임에 런타임 코드를 삽입하는 경우 대신 RuntimeModules를 사용하는 것이 좋습니다.
Webpack에서 복잡한 객체의 직렬화를 허용하기 위해 직렬화 메커니즘이 추가되었습니다. 옵트인 의미 체계가 있으므로 직렬화해야 하는 클래스에 명시적으로 플래그를 지정하고 직렬화를 구현해야 합니다. 직렬화 메커니즘은 대부분의 모듈, 모든 의존성 및 일부 오류에 대해 수행되었습니다.
마이그레이션: 커스텀 모듈 또는 의존성을 사용할 때 영구 캐싱의 이점을 얻으려면 직렬화할 수 있도록 하는 것이 좋습니다.
플러그인 인터페이스가 있는 Cache
클래스가 추가되었습니다. Cache
클래스를 사용하여 캐시에 쓰고 읽을 수 있습니다. 설정에 따라 다른 플러그인이 캐시에 기능을 추가할 수 있습니다. MemoryCachePlugin
은 메모리 내 캐싱을 추가합니다. FileCachePlugin
은 영구(파일 시스템) 캐싱을 추가합니다.
FileCachePlugin
은 직렬화 메커니즘을 사용하여 디스크에서 캐시된 항목을 유지하고 복원하거나 캐시된 항목을 디스크에 유지하고 복원합니다.
hooks
가 있는 클래스는 hooks
객체가 고정되어 있으므로 커스텀 훅을 추가하는 것은 더 이상 hooks
로 불가능합니다.
마이그레이션: 커스텀 훅을 추가하는 방법 중 권장하는 것은 WeakMap 및 정적 getXXXHooks(XXX)
(즉 getCompilationHook(compilation)
) 방법을 사용하는 것입니다. 내부 클래스는 커스텀 훅에 사용되는 것과 동일한 메커니즘을 사용합니다.
Webpack 3 플러그인에 대한 compat 레이어가 제거되었습니다. Webpack 4에서는 이미 더 이상 사용되지 않습니다.
덜 사용되는 Tapable API가 제거되거나 더 이상 사용되지 않습니다.
마이그레이션: 새 Tapable API를 사용합니다.
실링 프로세스의 여러 단계에 대해 여러개의 훅이 있었습니다. 즉 optimizeDependenciesBasic
optimizeDependencies
및 optimizeDependenciesAdvanced
는 stage
옵션과 함께 사용할 수 있는 단일 훅을 위해 제거되었습니다. 가능한 단계 값은 OptimizationStages
를 참고하세요.
마이그레이션: 대신 나머지 훅에 연걸합니다.stage
옵션을 추가할 수 있습니다.
번들 템플릿이 리팩토링 되었습니다. MainTemplate/ChunkTemplate/ModuleTemplate은 더 이상 사용되지 않으며 JavascriptModulesPlugin이 이제 JS templating을 처리합니다.
리팩토링 이전에는 JS 출력이 Main/ChunkTemplate에서 처리되고 다른 출력(예: WASM, CSS)은 플러그인에서 처리되었습니다. 각각 다른 곳에서 출력되는 것은 JS이 1급인 반면 다른 출력은 2급인 것처럼 보입니다. 리팩토링은 플러그인에서 모든 출력을 처리하도록 변경합니다.
템플릿의 일부에 연결하는 것은 여전히 가능합니다. 훅은 이제 Main/ChunkTemplate 대신 JavascriptModulesPlugin에 있습니다. 플러그인도 훅을 가질 수 있습니다. 개발자는 첨부된 훅이라 부릅니다.
compat 레이어가 있으므로 Main/Chunk/ModuleTemplate은 여전히 존재하지만 tab 호출만 새 훅 위치에 위임합니다.
마이그레이션: 지원 중단 메세지의 조언을 따르세요. 주로 다른 위치의 훅을 가리킵니다.
객체가 엔트리 포인트로 전달되는 경우 값은 문자열, 문자열 배열 또는 기술자가 될 수 있습니다.
module.exports = {
entry: {
catalog: {
import: './catalog.js',
},
},
};
기술자 구문을 사용하여 엔트리 포인트에 추가 옵션을 전달할 수 있습니다.
기본적으로 엔트리 청크의 출력 파일은 output.filename
에서 추출되지만 특정 항목에 대한 커스텀 출력 파일을 지정할 수 있습니다.
module.exports = {
entry: {
about: { import: './about.js', filename: 'pages/[name][ext]' },
},
};
기본적으로 모든 엔트리 청크는 사용하는 모든 모듈을 저장합니다. dependOn
옵션을 사용하면 한 엔트리 청크에서 다른 엔트리 청크로 모듈을 공유할 수 있습니다.
module.exports = {
entry: {
app: { import: './app.js', dependOn: 'react-vendors' },
'react-vendors': ['react', 'react-dom', 'prop-types'],
},
};
앱 청크에는 react-vendors
가 가지고 있는 모듈이 포함되지 않습니다.
엔트리 기술자는 각 엔트리 포인트에 대해 다른 library
옵션을 전달할 수 있습니다.
module.exports = {
entry: {
commonjs: {
import: './lib.js',
library: {
type: 'commonjs-module',
},
},
amd: {
import: './lib.js',
library: {
type: 'amd',
},
},
},
};
엔트리 기술자는 엔트리당 runtime
을 지정할 수 있습니다.
지정되면 항목에 대한 런타임 코드만 포함하는 이름의 청크가 생성됩니다.
여러 엔트리가 동일한 runtime
을 지정하면 해당 청크에는 모든 항목에 대한 공통 런타임이 포함됩니다.
공통 런타임이 포함되는 것은 HTML 페이지에선 함께 사용할 수 있음을 의미합니다.
module.exports = {
entry: {
app: {
import: './app.js',
runtime: 'app-runtime',
},
},
};
엔트리 기술자는 엔트리당 chunkLoading
을 지정할 수 있습니다.
엔트리의 런타임은 chunkLoading
을 사용하여 청크를 로드합니다.
module.exports = {
entry: {
app: {
import: './app.js',
},
worker: {
import: './worker.js',
chunkLoading: 'importScripts',
},
},
};
Webpack은 증분된 순서로 ID를 할당하기 위해 특정 방식으로 컴파일 단계에서 모듈과 청크를 순서화하는 데 사용됩니다. 더 이상 그렇지 않습니다. 순서는 더 이상 ID 생성에 사용되지 않으며 대신 ID 생성에 대한 모든 권한은 플러그인에 있습니다.
모듈 및 청크의 순서를 최적화하는 훅이 제거되었습니다.
마이그레이션: 더 이상 컴파일 단계에서 모듈과 청크의 순서에 의존할 수 없습니다.
사용 중단 경고를 출력하는 compat 레이어가 있습니다.
마이그레이션: 배열 메소드 대신 세트 메소드를 사용합니다.
새 클래스는 캐시된 방식으로 파일 시스템에 대한 정보에 액세스하는 데 사용할 수 있습니다. 현재 파일 및 디렉터리 타임 스탬프를 모두 요청할 수 있습니다. 타임 스탬프에 대한 정보는 가능한 경우 관찰자로부터 전송되며, 그렇지 않으면 파일 시스템 액세스에 의해 결정됩니다.
향후에는 파일 콘텐츠 해시를 요청하는 기능이 추가될 것이며 모듈은 파일 해시 대신 파일 콘텐츠로 유효성을 확인할 수 있을 것입니다.
마이그레이션: file/contextTimestamps
를 사용하는 대신 compilation.fileSystemInfo
API를 사용하세요.
ContextModules의 직렬화를 허용하는 디렉터리에 대한 타임 스탬프가 이제 가능합니다.
변경된 파일을 더 쉽게 참조할 수 있도록 Compiler.modifiedFiles
가 Compiler.removedFiles
옆에 추가되었습니다.
compiler.inputFileSystem
및 compiler.outputFileSystem
옆에 레코드 쓰기, 캐시 또는 프로파일링 출력과 같이 출력으로 간주되지 않는 모든 fs 작업에 대한 새로운 compiler.intermediateFileSystem
이 있습니다.
파일 시스템은 이제 fs
인터페이스를 가지며 join
또는 mkdirp
와 같은 추가 메소드를 더 이상 요구하지 않습니다. 그러나 join
또는 dirname
과 같은 메소드가 있으면 사용됩니다.
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")에서도 사용할 수 있습니다.
Webpack은 함수를 호출하는 함수에 의한 모듈 처리와 병렬 처리를 제한하는 semaphore
를 처리하는 데 사용됩니다. Compilation.semaphore
가 제거되었으며 이제 비동기 대기열이 작업 대기열 및 프로세싱을 처리합니다. 각 단계에는 별도의 대기열이 있습니다.
Compilation.factorizeQueue
: 의존성 그룹에 대한 모듈 팩토리 호출Compilation.addModuleQueue
: 모듈을 컴파일 대기열에 추가합니다(캐시에서 모듈을 복원할 수 있음).Compilation.buildQueue
: 필요한 경우 모듈을 빌드합니다(모듈을 캐시에 저장할 수 있음).Compilation.rebuildQueue
: 수동으로 트리거되면 모듈을 다시 빌드합니다.Compilation.processDependenciesQueue
: 모듈의 의존성을 처리합니다.대기열에는 작업 처리를 감시하고 가로채기 위한 몇 가지 훅이 있습니다.
향후 여러 컴파일러가 함께 작동할 수 있으며 대기열을 가로채서 작업 오케스트레이션을 수행할 수 있습니다.
마이그레이션: 새로 도입된 기능이므로 마이그레이션할 사항이 없습니다.
Webpack 내부에는 이제 일부 로깅이 포함됩니다.
stats.logging
및 infrastructureLogging
옵션을 사용하여 메세지를 활성화 할 수 있습니다.
Webpack은 확인된 모듈을 의존성에 저장하고 포함된 모듈을 청크에 저장하는 데 사용됩니다. 하지만 더 이상 그렇지 않습니다. 모듈 그래프에서 모듈이 연결되는 방식에 대한 모든 정보는 이제 ModuleGraph 클래스에 저장됩니다. 모듈이 청크와 연결되는 방식에 대한 모든 정보는 이제 ChunkGraph 클래스에 저장됩니다. 청크 그래프에 의존하는 정보도 관련 클래스에 저장됩니다.
위 내용은 다음에 나오는 모듈에 대한 정보가 이동되었음을 의미합니다.
Webpack은 캐시에서 복원할 때 그래프에서 모듈의 연결을 끊는 데 사용됩니다. 하지만 더 이상 필요하지 않습니다. 모듈은 그래프에 대한 정보를 저장하지 않으며 기술적으로 여러 그래프에서 사용할 수 있습니다. 이로써 캐싱이 더 쉬워집니다.
위 변경 사항의 대부분에 대해 compat 레이어가 있으며 사용 시 사용 중단 경고를 출력합니다.
마이그레이션: ModuleGraph 및 ChunkGraph에서 새 API 사용
InitFragments를 위해 DependenciesBlockVariables
가 제거되었습니다. DependencyTemplates
는 이제 InitFragments
를 추가하여 모듈 소스의 최상단에 코드를 삽입할 수 있습니다. InitFragments
는 중복 제거를 허용합니다.
마이그레이션: 소스에 네거티브 인덱스에 있는 것을 삽입하는 대신 InitFragments
를 사용하세요.
모듈은 이제 Module.getSourceTypes()
를 통해 지원하는 소스 유형을 정의해야 합니다. 유형에 따라 다른 플러그인은 지원하는 유형으로 source()
를 호출합니다. 즉 소스 유형 javascript
의 경우 JavascriptModulesPlugin
이 소스 코드를 번들에 포함합니다. 소스 유형 webassembly
는 WebAssemblyModulesPlugin
이 WASM 파일을 내보내도록 합니다. 커스텀 소스 유형도 지원됩니다. 즉 mini-css-extract-plugin은 소스 유형 stylesheet
을 사용하여 소스 코드를 CSS 파일에 포함할 것입니다.
모듈 유형과 소스 유형 사이에는 관계가 없습니다. 즉 모듈 유형 json
은 소스 유형 javascript
에도 사용하고 모듈 유형 webassembly/experimental
은 javascript
및 webassembly
소스 유형을 사용합니다.
마이그레이션: 커스텀 모듈은 새로운 인터페이스 메소드를 구현해야 합니다.
통계 preset
, default
, json
및 toString
이 이제 플러그인 시스템에 의해 장착됩니다. 현재 통계를 플러그인으로 변환했습니다.
마이그레이션: 전체 통계 기능을 교체하는 대신 이제 커스터마이즈할 수 있습니다. 추가 정보는 이제 별도의 파일을 작성하는 대신 stats json에 추가될 수 있습니다.
Wepback에서 사용하는 관찰자가 리팩토링 되었습니다. 이전에는 chokidar
와 기본 의존성 fsevents
(macOS에서만)를 사용했습니다. 이제 네이티브 Node.js fs
만을 기반으로 합니다. 이는 webpack에 기본 의존성이 남아 있지 않음을 의미합니다.
또한 관찰하는 동안 파일 시스템에 대한 추가 정보를 캡처합니다. 이제 mtimes를 캡처하고 이벤트 시간과 누락된 파일에 대한 정보를 관찰합니다. 관찰하기 위해 WatchFileSystem
API가 약간 변경되었습니다. 그동안 우리는 배열을 세트로, 객체를 맵으로 변환했습니다.
Webpack은 이제 Compilation.assets
의 소스를 SizeOnlySource
의 변형으로 대체하여 메모리 사용량을 줄입니다.
Multiple assets emit different content to the same filename
라는 경고가 오류가 발생했습니다.
모듈 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가 정보가 첨부된 객체인 경우
import * as X from "..."; export { X };
편집은 이제 별도의 편집 단계로 코드 생성 기능을 제공합니다. 더 이상 Module.source()
또는 Module.getRuntimeRequirements()
에 숨겨져 실행되지 않습니다.
코드 생성 기능을 제공하면 흐름이 훨씬 더 깨끗해집니다. 또한 이 단계의 진행 상황을 보고할 수 있으며 프로파일링할 때 코드 생성을 더 잘 볼 수 있습니다.
마이그레이션: Module.source()
와 Module.getRuntimeRequirements()
는 이제 더 이상 사용되지 않습니다. 대신 Module.codeGeneration()
를 사용하세요.
Webpack에는 의존성 참조를 나타내는 단일 메소드와 유형이 있었습니다(Compilation.getDependencyReference
이 DependencyReference
를 반환하는 경우).
의존성 참조를 나타내는 유형은 참조된 모듈과 같이 참조에 대한 모든 정보를 포함하는 데 사용되었는데, 만약 약한 참조 및 일부 순서 관련 정보인 경우 불러온 참조된 모듈을 내보냅니다.
모든 정보를 함께 묶으면 누군가가 하나의 정보가 필요할 때마다 참조를 얻는 데 비용이 많이 들고 자주 호출되기도 합니다.
Webpack 5에서는 코드베이스의 의존성 참조 부분이 리팩토링 되었고 메소드가 분할되었습니다.
Dependency.getReferencedExports()
를 통해 가져올 수 있습니다.Dependency
클래스에 weak
플래그가 있습니다.HarmonyImportDependencies
에만 관련되며 sourceOrder
속성을 통해 가져올 수 있습니다.이제 NormalModules
에 새로운 유형의 의존성이 있습니다: 표현적 의존성
표현적 의존성은 코드 생성 단계에서만 사용되지만 모듈 그래프 빌드 중에는 사용되지 않습니다. 따라서 모듈을 참조하거나 내보내기/가져오기에 영향을 줄 수 없습니다. 표현적 의존성은 처리 비용이 저렴하고 webpack은 가능한 경우 이를 사용합니다.
더 이상 사용되지 않고 다음과 같이 사용합니다.
module.exports = {
resolve: {
alias: {
xyz$: false,
},
},
};
또는 절대 경로를 사용합니다.
module.exports = {
resolve: {
alias: {
[path.resolve(__dirname, '....')]: false,
},
},
};
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
에 추가하여 컴파일에 의존성을 추가할 수 있습니다.compilationDependencies.add
를 fileDependencies.add
에 위임합니다.stats.assetsByChunkName[x]
는 이제 항상 배열입니다.__webpack_get_script_filename__
함수가 스크립트 파일의 이름을 가져오기 위해 추가되었습니다."sideEffects"
는 micromatch
대신 glob-to-regex
에 의해 처리됩니다.
"sideEffects"
는 에지 케이스에서 의미 체계를 변경했을 수 있습니다.IgnorePlugin
에서 checkContext
가 제거되었습니다.__webpack_exports_info__
API를 사용하여 용인된 내보내기를 허용합니다.serve
속성이 제거되었습니다.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
인덱스 및 인덱스 이름이 사전/사후 순서 인덱스로 변경되었습니다.
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
가 추가되었습니다.
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.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
를 사용합니다.setId
를 사용합니다.async-node
node
web
webworker
에 대해 실행됩니다.store: "instant"
및 store: "pack"
을 사용하여 파일 시스템 캐싱에 대해서도 실행됩니다.resolvedModuleId
resolvedModuleIdentifier
및 resolvedModule
가 추가되었습니다.resolvedModule
가 표시됩니다.Compilation
의 file/context/missingDependencies
는 더 이상 성능상의 이유로 정렬되지 않습니다.
Compiler.assetEmitted
에는 더 많은 정보가 포함된 향상된 두 번째 인수를 가집니다.LimitChunkCountPlugin
에서 minChunkSize
옵션이 제거되었습니다.webpack.JavascriptModulesPlugin
-> webpack.javascript.JavascriptModulesPlugin
__system_context__
를 추가하였습니다.emitAsset
의 assetInfo
가 중첩된 객체 또는 배열을 사용할 때 병합됩니다.filename
을 기반으로 하는 경로의 경우 [query]
가 이제 유효한 플레이스홀더입니다.Compilation.deleteAsset
을 추가하세요.require("webpack-sources")
가 require("webpack").sources
로 보입니다.