當下最流行的模組打包器 webpack 於2023年2月25日正式發布v4.0.0版本,代號legato。本次大版本更新帶來了很多新特性更新和改善,這將會讓webpack的配置更加簡單。本文,博主將會全面介紹webpack4的新特性及實踐。
在發布日誌裡的big changes板塊,官方宣布不在支援node 4, node 6 使用的是v8 5.0版本,支援93%的es6語法。不難看出,這個決定是為了更好的利用es6語法的優勢,來編寫出更加整潔和健壯的**。
備註:當使用webpack4時,確保使用 node.js的版本 >= 8.9.4。因為webpack4使用了很多js新的語法,它們在新版本的 v8 裡經過了優化。另乙個大的改變是webpack需要設定mode屬性,可以是 development 或 production。
"scripts":
複製**
通過mode, 你可以輕鬆設定打包環境。如果你將 mode 設定成 development,你將獲得最好的開發階段體驗。這得益於webpack針對開發模式提供的特性:
如果你將mode設定成了 production, webpack將會專注專案的部署,包括以下特性:
webpack4刪除了commonschunkplugin外掛程式,它使用內建apioptimization.splitchunks和optimization.runtimechunk,這意味著webpack會預設為你生成共享的**塊。其它外掛程式變化如下:
webassembly(wasm)會帶來執行時效能的大幅度提公升,由於在社群的熱度,webpack4對它做了開箱即用的支援。你可以直接對本地的wasm模組進行import或者export操作,也可以通過編寫loaders來直接import c++、c或者rust。
webpack4支援5種模組型別:
0cjs的含義是0配置,webpack4受parcel打包工具啟發,盡可能的讓開發者執行專案的成本變低。為了做到0配置,webpack4不再強制需要webpack.config.js作為打包的入口配置檔案了,它預設的入口為'./src/'和預設出口'./dist',這無疑對小專案而言是福音。
你所需要做的是在你的專案裡包含 ./src/index.js 檔案。當在命令列裡執行 webpack 命令時,webpack會將該檔案作為專案的入口檔案進行打包配置。
webpack4對外掛程式系統進行了不少修改,提供了針對外掛程式和鉤子的新api。變化如下:
已經有不少關於webpack5的計畫正在進行中了,包括以下:
webpack4配置詳解
方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash,根據chunk自身的內容計算而來,js name chunkhash...
webpack4快速上手
1.在專案根目錄cnpm init y初始化。生成package.json檔案 2.在專案裡面使用cnpm安裝webpack 3.需要在根目錄下新建webpack.config.js檔案 在其裡面配置暴露物件 module.exports 4.在根目錄下新建src index.js檔案 因為此時執行...
webpack4 基本使用
webpack是基於node構建,所以wepack支援所有node api和語法。即 chrome瀏覽器能支援的ecmascript語法 排除dom bom wbpack都能支援。chrome不支援es6,所以webpack也不支援。建立基本的webpack4.x專案 建立後的目錄 其中 packa...