webpack作為最使用最廣泛的前端打包工具，已經(jīng)成為前端工程化基礎(chǔ)設(shè)施的一部分。而Webpack上一個(gè)大版本更新已經(jīng)是18年的時(shí)候了，兩年時(shí)間過去了讓我們看看Webpack5都帶來了哪些新特性，對(duì)我們的應(yīng)用又有哪些幫助。

概覽

下面這張圖是 Webpack 官方 Changelog 里面截圖出來的，可以看到​主要有這些方面的提高：

• 通過持久化緩存提高性能
• 采用更好的持久化緩存算法和默認(rèn)行為
• 通過優(yōu)化 Tree Shaking 和代碼生成來減小Bundle體積
• 提高 Web 平臺(tái)的兼容性
• 清除之前為了實(shí)現(xiàn) Webpack4 沒有不兼容性變更導(dǎo)致的不合理 state
• 嘗試現(xiàn)在引入重大更改來為將來的功能做準(zhǔn)備，以使我們能夠盡可能長(zhǎng)時(shí)間地使用 Webpack 5
  

不得不說，這個(gè)官方聲明稍微簡(jiǎn)略了一點(diǎn)，只提到了持久化緩存優(yōu)化性能和更好的 Tree Shaking，Module federation 這個(gè)重大特性居然提都沒有提。下面還是跟著小編看看具體都升級(jí)了哪些部分。

過時(shí)功能移除

首先是去掉了在 Webpack4 里面已經(jīng) Warming 的功能。

同時(shí) IgnorePlugin 和 BannerPlugin 現(xiàn)在必須傳入一個(gè)參數(shù)，參數(shù)可以是 Object、String或者Function

require.include 語(yǔ)法被廢棄，使用時(shí)會(huì)有 Warming。當(dāng)然這個(gè)行為可以通過 Rule.parser.requireInclude 來把這個(gè)語(yǔ)法改成 allowed, deprecated 或者 disabled

去掉自動(dòng) Node.js Polyfills 。早期 Webpack 的主要目的是讓 Node.js 的模塊能夠在瀏覽器運(yùn)行，但隨著模塊格局的改變，越來越多的模塊只用于瀏覽器，這個(gè)時(shí)候再自動(dòng) Polyfills 一些 Node 模塊（例如 crypto）無疑會(huì)增加打包體積，在 Webpack5 之后去掉了這個(gè)自動(dòng)行為

長(zhǎng)期緩存

確定性的模塊、模塊ID和導(dǎo)出名稱。

• 首先是模塊、ID和導(dǎo)出名稱都唯一確定下來，背后對(duì)應(yīng)的配置是 chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"
• 其中模塊和模塊ID用 3 ~ 4 位的數(shù)字ID，導(dǎo)出名稱用 2 位的數(shù)字ID
• 這個(gè)設(shè)置是默認(rèn)開啟的，但也允許通過上述配置修改

真實(shí)內(nèi)容哈希

• 在 Webpack5 里會(huì)使用文件內(nèi)容的真實(shí)哈希 [contenthash]，而不是之前的僅僅使用文件內(nèi)部結(jié)構(gòu)的哈希
• 這對(duì)于長(zhǎng)期緩存有著積極的影響，尤其是代碼里面只有注釋和變量名修改的時(shí)候，Webpack會(huì)繼續(xù)用之前的緩存而不是新的文件內(nèi)容

開發(fā)支持

首先是 Chunk IDs 語(yǔ)義化。

新的 Chunk IDs 使用了新的語(yǔ)法生成 Chunk ID，一個(gè) Chunk ID 是有 chunk 的內(nèi)容來決定的。所以我們不再需要 import(/* webpackChunkName: "name" */ "module") 來 debugging 了

但這樣也有可能把 chunk 里面的敏感內(nèi)容暴露出去（如果有的話），可以 通過修改 chunkIds: "named"來修改這一行為

其次是 Module Federation

• 這是一個(gè)值得濃墨重彩的特性。模塊聯(lián)邦 允許多個(gè) Webpack 構(gòu)建產(chǎn)物一起工作，在運(yùn)行時(shí)把多個(gè)構(gòu)建產(chǎn)物聚合到一起，看起來就像是一個(gè)大的構(gòu)建產(chǎn)物一樣。
• 比如下面這個(gè)例子 app_one 和 app_two 使用了共享的 ["react", "react-dom","react-router-dom"]，同時(shí) app_two 把自己的 Dialog 暴露給了 app_one 使用
• 通過模塊聯(lián)邦可以原生解決模塊直接互相依賴的問題，在微前端領(lǐng)域尤其適用！同時(shí)一些基礎(chǔ)依賴也有可能都改成外部依賴，在本地開發(fā)的時(shí)候就無需引入，通過避免眾所周知的 node_modules 層次太深的問題，在本地開發(fā)過程中有可能實(shí)現(xiàn)大幅提效

module.exports = {
 plugins: [
  new ModuleFederationPlugin({
   name: "app_two_remote",
   library: { type: "var", name: "app_two_remote" },
   filename: "remoteEntry.js",
   exposes: {
    “./Dialog”: "./src/Dialog"
   },
   remotes: {
    app_one: "app_one_remote",
   },
   shared: ["react", "react-dom","react-router-dom"]
  }),
  new HtmlWebpackPlugin({
   template: "./public/index.html",
   chunks: ["main"]
  })
 ]
};

更好的 Tree Shaking。

嵌套 tree-shaking。 Webpack現(xiàn)在會(huì)去追蹤 export 的鏈路，對(duì)于嵌套場(chǎng)景有更好的優(yōu)化，比如下面這個(gè)例子里 b 是不會(huì)出現(xiàn)在生產(chǎn)代碼里。

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

內(nèi)部模塊。Webpack 4 不會(huì)去分析導(dǎo)入和導(dǎo)出模塊之間的依賴關(guān)系，Webpack5 里面會(huì)通過 optimization.innerGraph記錄依賴關(guān)系。比如下面這個(gè)例子，只有 test 方法使用了 someting 。最終可以實(shí)現(xiàn)標(biāo)記更多沒有使用的導(dǎo)出項(xiàng)

import { something } from "./something";

function usingSomething() {
return something;
}

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

Commondjs。現(xiàn)在Webpack不僅僅支持 ES module 的 tree Shaking，commonjs規(guī)范的模塊開始支持了

其他特性

• 新的 Web 平臺(tái)支持。在Webpack 5 里面開始原生支持 JSON Modules、Asset Modules、Native Worker 和 異步模塊等等
• Webpack 生成的代碼不再僅僅是ES5，也會(huì)生成 ES6 的代碼
• Node.js 的最小支持版本從 6 升級(jí)到了 10
  

喜歡嘗鮮的同學(xué)現(xiàn)在就可以照著遷移指南升級(jí)自己的Webpack了，出于謹(jǐn)慎考慮建議優(yōu)先從從自己練手和后臺(tái)類應(yīng)用開始升級(jí)
遷移指南：https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md

小結(jié)

可以看到，兩年時(shí)間過去 Webpack5 進(jìn)行了大量的升級(jí)，包括更好的性能、更強(qiáng)的開發(fā)能力支持以及更多原生的特性。而Webpack5帶來的影響也不僅僅于此，Module Federation 對(duì)于模塊依賴關(guān)系的改變，對(duì)于現(xiàn)有開發(fā)模式的沖擊還在進(jìn)一步觀察中。期待 Web 開發(fā)越來越好。

到此這篇關(guān)于Webpack5正式發(fā)布,有哪些新特性的文章就介紹到這了,更多相關(guān)Webpack5 新特性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論