webpack5新特性

此版本重點關注以下內容:

  • 通過持久緩存提高構建性能.
  • 使用更好的算法和默認值來改善長期緩存.
  • 通過更好的樹搖和代碼生成來改善捆綁包大小.
  • 清除處于怪異狀態(tài)的內部結構缺狠,同時在 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 模塊),這些模塊就會自動應用婉宰。

盡管這使使用為 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 內部有 chunk 命名規(guī)則堕虹,不再是以 id(0, 1, 2)命名了

Tree Shaking

  1. 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 會被刪除

  1. webpack 現(xiàn)在能夠多個模塊之前的關系
import { something } from './something';

function usingSomething() {
  return something;
}

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

當設置了"sideEffects": false時卧晓,一旦發(fā)現(xiàn)test方法沒有使用,不但刪除test赴捞,還會刪除"./something"

  1. 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 總是在第一次構建時輸出全部文件,但是監(jiān)視重新構建時會只更新修改的文件赦政。

此次更新在第一次構建時會找到輸出文件看是否有變化波附,從而決定要不要輸出全部文件。

默認值

  • entry: "./src/index.js
  • output.path: path.resolve(__dirname, "dist")
  • output.filename: "[name].js"

更多內容

https://github.com/webpack/changelog-v5

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末昼钻,一起剝皮案震驚了整個濱河市掸屡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌然评,老刑警劉巖仅财,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異碗淌,居然都是意外死亡盏求,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門亿眠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碎罚,“玉大人,你說我怎么就攤上這事纳像【A遥” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵竟趾,是天一觀的道長憔购。 經(jīng)常有香客問我,道長岔帽,這世上最難降的妖魔是什么玫鸟? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮犀勒,結果婚禮上屎飘,老公的妹妹穿的比我還像新娘妥曲。我一直安慰自己,他們只是感情好钦购,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布逾一。 她就那樣靜靜地躺著,像睡著了一般肮雨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上箱玷,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天怨规,我揣著相機與錄音,去河邊找鬼锡足。 笑死波丰,一個胖子當著我的面吹牛,可吹牛的內容都是我干的舶得。 我是一名探鬼主播掰烟,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼沐批!你這毒婦竟也來了纫骑?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤九孩,失蹤者是張志新(化名)和其女友劉穎先馆,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體躺彬,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡煤墙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了宪拥。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仿野。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖她君,靈堂內的尸體忽然破棺而出脚作,到底是詐尸還是另有隱情,我是刑警寧澤缔刹,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布鳖枕,位于F島的核電站,受9級特大地震影響桨螺,放射性物質發(fā)生泄漏宾符。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一灭翔、第九天 我趴在偏房一處隱蔽的房頂上張望魏烫。 院中可真熱鬧辣苏,春花似錦、人聲如沸哄褒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽呐赡。三九已至退客,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間链嘀,已是汗流浹背萌狂。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留怀泊,地道東北人茫藏。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像霹琼,于是被迫代替她去往敵國和親务傲。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內容

  • 1:剔除npm包里面針對Node.js模塊自動引用的Polyfills v4編譯引入npm包枣申,有些npm包里面包含...
    flyrain2020閱讀 3,169評論 0 1
  • Webpack 5 發(fā)行版 (2020-10-10) webpack 4在2018年二月份發(fā)行售葡。在那以后我們封裝了...
    廣蘭路地鐵閱讀 951評論 0 0
  • Webpack是現(xiàn)在主流的功能強大的模塊化打包工具,在使用Webpack時忠藤,如果不注意性能優(yōu)化天通,有非常大的可能會產(chǎn)...
    沫之閱讀 978評論 0 0
  • 第 1 章:webpack 簡介 1.1 webpack 是什么 webpack 是一種前端資源構建工具,一個靜態(tài)...
    阿_軍閱讀 760評論 0 1
  • 推薦指數(shù): 6.0 書籍主旨關鍵詞:特權熄驼、焦點像寒、注意力、語言聯(lián)想瓜贾、情景聯(lián)想 觀點: 1.統(tǒng)計學現(xiàn)在叫數(shù)據(jù)分析诺祸,社會...
    Jenaral閱讀 5,717評論 0 5