此版本重點關(guān)注以下內(nèi)容:
- 通過持久緩存提高構(gòu)建性能.
- 使用更好的算法和默認值來改善長期緩存.
- 通過更好的樹搖和代碼生成來改善捆綁包大小.
- 清除處于怪異狀態(tài)的內(nèi)部結(jié)構(gòu)，同時在 v4 中實現(xiàn)功能而不引入任何重大更改.
- 通過引入重大更改來為將來的功能做準備，以使我們能夠盡可能長時間地使用 v5.
下載
- npm i webpack@next webpack-cli -D
自動刪除 Node.js Polyfills
早期，webpack 的目標是允許在瀏覽器中運行大多數(shù) node.js 模塊，但是模塊格局發(fā)生了變化，許多模塊用途現(xiàn)在主要是為前端目的而編寫的。webpack <= 4 附帶了許多 node.js 核心模塊的 polyfill，一旦模塊使用任何核心模塊（即 crypto 模塊），這些模塊就會自動應(yīng)用。
盡管這使使用為 node.js 編寫的模塊變得容易，但它會將這些巨大的 polyfill 添加到包中。在許多情況下，這些 polyfill 是不必要的。
webpack 5 會自動停止填充這些核心模塊，并專注于與前端兼容的模塊。
遷移：
- 盡可能嘗試使用與前端兼容的模塊。
- 可以為 node.js 核心模塊手動添加一個 polyfill。錯誤消息將提示如何實現(xiàn)該目標。
Chunk 和模塊 ID
添加了用于長期緩存的新算法。在生產(chǎn)模式下默認情況下啟用這些功能。
chunkIds: "deterministic", moduleIds: "deterministic"
Chunk ID
你可以不用使用 import(/* webpackChunkName: "name" */ "module") 在開發(fā)環(huán)境來為 chunk 命名，生產(chǎn)環(huán)境還是有必要的
webpack 內(nèi)部有 chunk 命名規(guī)則，不再是以 id(0, 1, 2)命名了
Tree Shaking
- webpack 現(xiàn)在能夠處理對嵌套模塊的 tree shaking
// inner.js
export const a = 1;
export const b = 2;
// module.js
import * as inner from './inner';
export { inner };
// user.js
import * as module from './module';
console.log(module.inner.a);
在生產(chǎn)環(huán)境中, inner 模塊暴露的 b 會被刪除
- webpack 現(xiàn)在能夠多個模塊之前的關(guān)系
import { something } from './something';
function usingSomething() {
return something;
}
export function test() {
return usingSomething();
}
當設(shè)置了"sideEffects": false時，一旦發(fā)現(xiàn)test方法沒有使用，不但刪除test，還會刪除"./something"
- webpack 現(xiàn)在能處理對 Commonjs 的 tree shaking
Output
webpack 4 默認只能輸出 ES5 代碼
webpack 5 開始新增一個屬性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代碼.
如：output.ecmaVersion: 2015
SplitChunk
// webpack4
minSize: 30000;
// webpack5
minSize: {
javascript: 30000,
style: 50000,
}
Caching
// 配置緩存
cache: {
// 磁盤存儲
type: "filesystem",
buildDependencies: {
// 當配置修改時，緩存失效
config: [__filename]
}
}
緩存將存儲到 node_modules/.cache/webpack
監(jiān)視輸出文件
之前 webpack 總是在第一次構(gòu)建時輸出全部文件，但是監(jiān)視重新構(gòu)建時會只更新修改的文件。
此次更新在第一次構(gòu)建時會找到輸出文件看是否有變化，從而決定要不要輸出全部文件。
默認值
entry: "./src/index.jsoutput.path: path.resolve(__dirname, "dist")output.filename: "[name].js"
