webpack-4.0更新日誌（翻譯）

YDJFE發表於2018-02-27
Web

前言

純手打翻譯，也有小部分比較生硬的翻譯，原諒那部分我也沒太懂?

大改動

  • 環境

    不在支援Nodejs 4。原始碼已經更新到一個較高的ecmascript版本。

  • 使用

    • 你必須在兩種模式中選擇一個（mode或者--mode）： production 或者 development
      • production 會開放所有優化功能去建立一個最優化的包
      • development 開放註釋和提示，並開啟eval devtool功能
      • production 不支援監聽模式，development擁有著更快速的增量構建
      • 你可以通過optimization.* 的方式去設定更詳細的配置（搭建你的自定義模式）
      • process.env.NODE_ENV變數已經在production和development兩種模式中被設定了（只在構建的程式碼裡面，不在配置裡）
      • 還有一種隱藏的none模式, 這種模式禁用了所有東西

  • 語法

    • import()永遠都會返回一個帶名稱空間的物件。CommonJS模組會被包成export的default裡面。
      • 這個很可能會破壞你的程式碼，如果你使用import()的方式去匯入你的CommonJS程式碼。

  • 配置

    • 你不在需要使用這些外掛：
      • NoEmitOnErrorsPlugin ->optimization.noEmitOnErrors（production模式預設開啟）
      • ModuleConcatenationPlugin ->optimization.concatenateModules（production模式預設開啟）
      • NameModulesPlugin -> optimization.nameModules（development模式預設開啟）
    • CommonsChunkPlugin已經被移除 -> optimization.splitChunks,optimization.runtimeChunk

  • JSON

    • webpack現在能處理原生的json
      • 當你需要通過loader去把json轉換成js的時候，你可能需要新增type:"javascript/auto"
      • 不使用loader也可以直接使用JSON
    • 允許通過ESM語法匯入JSON
      • JSON模組的未使用的匯出部分會被消除

  • 優化

    • 更新 uglifyjs-webpack-plugin到v1
      • ES2015支援

大功能

  • 模組

    • webpack現在支援下面的模組型別：

      • javascript/auto:(webpack 3中的預設型別) 所有模組裡面的javascript模組

        系統支援： CommonJS， AMD， ESM

      • javascript/esm: EcmaScript模組，所有的其他系統模組型別將獲取不到

      • javascript/dynamic: 只有CommonJS和EcmaScript的模組將獲取不到

      • json: JSON資料， 可以通過require或者import獲取

      • webassembly/experimental： WebAssembly 模組（當前還是實驗版本）

    • javascript/esm處理ESM的時候迴避javascript/auto更嚴格

      • 匯入進來的名字需要需要在匯入的模組中存在

      • 動態模組（非esm，比如CommonJS）只能通過import的default裡面獲得

        其他所有的方式（包括名稱空間的匯入）都會報錯。

    • 在.mjs的模組裡面將預設使用javascript/esm模式

    • WebAssembly模組

      • 可以匯入其他模組（JS和WASM）
      • 從WebAssembly匯出的模組會經過ESM匯入驗證
        • 當你從WASM的匯出內容裡面嘗試匯入一個不存在的內容的時候將會活動的警告/錯誤提示。
      • 只能用在非同步載入chunk裡面，在初始化的chunk裡面不能正常工作。（對頁面效能影響很大）。
        • 通過import()的方式去匯入WASM模組

  • 優化

    • sideEffects: false 現在已經支援在package.json裡面使用

      • package.json裡面sideEffect允許使用glob表示式和glob表示式陣列

    • JSONP陣列已經代替JSONP函式使用 -> 非同步指令碼標記支援， 順序不再重要。

    • 新增新的選項optimization.splitChunks

      詳情：gist.github.com/sokra/1522d…

    • webpack自身移除了廢棄的分支程式碼

      • 之前：Uglify移除掉不用的程式碼
      • 現在： webpack移除掉不用的程式碼（相同情況下）
      • 當遇到廢棄的分支程式碼裡面含有import()將會停止移除操作。

  • 語法

    • import() 支援黑科技般的註釋： webpackInclude和webpackExclude。

      他們允許你在使用動態表示式匯入的時候過濾掉一些檔案。

    • 使用System.import()將會提示警告

      • 你可以通過Rule.parser.system:true關閉掉這些警告
      • 你可以通過Rule.parser.sustem:false來禁用System.import

  • 配置

    • 可以通過module.rules[].resolve來配置解析方式。這將會跟全域性的配置合併到一起。
    • optimization.minimize已經被新增到配置裡面，通過其開關最小化/壓縮功能。
      • 預設在production模式中開啟，預設在development模式中關閉
    • optimization.minimizer已經被新增到配置裡面，通過其去設定壓縮處理程式和選項。

  • 使用

    • 一些外掛的選項已經失效
    • CLI已經遷移到了webpack-cli，你需要安裝webpack-cli才能使用CLI
    • ProgressPlugin外掛 (--progress) 現在會列印顯示外掛的名字
      • 至少對已經遷移到新外掛系統的外掛來說

  • 效能

    • UglifyJs現在預設快取和並行化
    • 許多的效能提升，尤其是更快的增量構建
    • RemoveParentModulesPlugin的效能提升

  • Stats

    Stats現在會在有串聯的模組中列印顯示層級巢狀

功能

  • 配置
    • 模組型別會自動在mjs,json和wasm擴充套件中自動選擇。其他擴充套件需要通過module.rules[].type中配置。
    • 錯誤的options.dependencies配置會丟擲錯誤。
    • sideEffects 可以通過module.rules覆蓋
    • output.hashFunction現在可以是一個自定義的hash處理函式
      • 由於效能原因，您可以提供一個非cryto雜湊函式
    • 新增output.globalObject config選項，以允許在執行時exitCode中選擇全域性物件引用
  • 執行時
    • 錯誤的chunk載入現在會有包含更多的資訊和兩個新屬性type和request
  • devtool
    • 在sourcemaps和eval裡面移除了底部註釋
    • 在eval的soucemap裡面新增了include test 和exclude的支援
  • 效能
    • webpack的AST可以被正確的在loader中傳遞，以避免額外重複的語法分析
    • 沒有被使用的模組將不再被關聯
    • 新增一個ProfillingPlugin外掛，可以寫（Chrome）包含timings的profile檔案
    • 遷移， 用for of代替forEach
    • 遷移， 用Map和Set代替Objects
    • 遷移，用includes代替indexOf
    • 用正規表示式替換掉一些字串方法
    • 佇列不再查詢同一個作業兩次
    • 預設使用更快的md4 hash來做hashing
  • 優化
    • 當使用超過25個匯出的時候會使匯出的名字更短
    • script標籤不再加入text/javascript和async，因為他們是預設值（節省一些位元組）
    • 串聯的模組會生成更少的程式碼
    • 常量替換現在不需要__webpack_require__和引數已經刪除
  • 預設
    • webpack現在會按.wasm,.mjs,.js,.json擴充套件的順序尋找檔案
    • output.pathinfo現在是development模式預設開啟
    • production模式預設關閉記憶體快取
    • entry預設指向./src
    • output.path預設指向./dist
    • 不指定mode的時候預設使用production模式
  • 語法
    • 上下文支資源查詢
    • 在import()裡面應用一個入口節點的名字會從警告變成錯誤提示
    • 更新acorn5以支援ES2018
  • 外掛
    • done現在是一個非同步鉤子

Bug修復

  • 建立註釋的時候不會再因為遇到*/而被打斷
  • webpack不再修改已經過去的選項物件
  • 編譯器"watch-run"鉤子現在包含編譯器自身作為第一個引數
  • 新增output.chunkCallbackName以允許配置webworker模板
  • 使用 mdoule.id/loaded可以正確的跳出模組連結（作用域提升）
  • OccurenceOrderPlugin現在能正確的對模組進行排序(而不是相反)
  • 當呼叫Watching.invalidate時，檔案的時間戳是從監聽器中獲取
  • 修復post loader中的不正確的-!行為
  • 在MultiCompiler中新增run和watchRun鉤子
  • 在ESM中this會是undefined
  • 可以通過var,let,const來進行正確的變數宣告
  • 解析器現在在使用模組型別javascript/dynamic或javascript/module時，用正確的原始碼（模組/指令碼）來解析原始碼。
  • 在遇到buildMetaof Null丟失模組的時候不會打斷
  • 在electron target中新增original-fs模組
  • HMRPlugin 可以在plugins之外新增到編譯器中

內部改動

  • 使用tap呼叫來替換plugin呼叫(新外掛系統)
  • 遷移許多遺棄的外掛到新的外掛系統API中
  • 新增buildMeta.exprotsType:default到json模組中
  • 移除解析器中不用的函式(parserStringArray, parserCalculatedStringArray)
  • 移除清除BasicEvaluatedExpression和具有多個型別的能力
  • 使用Buffur.from替換new Buffer
  • 避免使用forEach而是使用for of
  • 用neo-async代替async
  • 將可利用和增強-解析依賴項更新到新的主版本
  • 使用Prettier

移除的功能

  • 移除 module.loaders

  • 移除 loaderContext.options

  • 移除 Compliation.notCacheable標記

  • 移除 NoErrorsPlugin

  • 移除 Dependency.isEqualResource

  • 移除 NewWatchingPlugin

  • 移除 CommonsChunkPlugin

    ​

    ​

破壞性的變更， 針對外掛/loader

  • 新的外掛系統
    • plugin方法向後相容
    • 外掛應該使用Compiler.hooks.xxx.tap(<plugin name>, fn)
  • 新的主版本增強型解析
  • chunks的模板現在可以生成多個assets
  • Chunk.chunks/parents/blocks現在不在是陣列。內部使用一個Set，並且有方法可以訪問到它。
  • Parser.scope.renames和Parser.scope.definitions不在是Object/Array,而是 Map/Set.
  • 解析器使用StackedSetMap（LevelDB形式的陣列結構）代替陣列
  • 當應用外掛的時候不再設定Compiler.options
  • 由於重構，和諧的依賴關係已經發生改變
  • Dependency.getReference() 現在將返回一個 weak 屬性. Dependency.weak 現在被 Dependency的基類使用 並且在 getReference()內部基礎impl中返回
  • 構造器的引數對所有的module改變
  • 合併ContextModule和resolveDependencies中的選項
  • 改變並且重新命名import()裡面的依賴
  • 遷移Compiler.resolvers到Compiler.resolverFactory以使外掛可以訪問到
  • Dependency.isEqualResource被Dependency.getResourceIdentifier替換
  • Template裡面的方法現在是靜態方法
  • 新增一個新的 RuntimeTemplate 類，outputOptions和requestShortener遷移到這個類裡面
    • 許多方法更新成用RuntimeTemplate替代
    • 我們計劃移動那些可以訪問到執行時的程式碼到一個新類
  • Module.meta被Module.buildMeta替代
  • 新增Module.buildInfo和Module.factoryMeta
  • Module的一些屬性被移動到一個新的物件
  • 新增那個指向context選項的loaderContext.rootContext。 loaders可能需要用它去建立相對於程式根的內容
  • 新增this.hot標記到loader上下文，當HMR開啟的時候
  • buildMeta.harmony被buildMeta.exportType: "namespace"替代
  • chunk圖已經改變：
    • 之前：chunks之間是通過父子關係關聯
    • 現在： chunk組通過父子關係關聯，chunk組包含chunks
    • 之前： 非同步依賴的塊引用一組chunks
    • 現在： 非同步依賴引用的是單個chunk組
  • file/contextTimstamps現在是Maps
  • map/foreach Chunks/Modules/Parents方法已經被移除
  • NormalModule 接收構造器裡面的選項物件
  • 新增必要的生成引數給NormalModule
  • 在NormalModuleFactory裡面新增createGenerator和generator鉤子以自定義程式碼生成
  • 允許通過鉤子自定義地渲染Chunks的mainfest

相關文章