webpack-4.0更新日誌（翻譯）

時間 2019-11-06

標籤 webpack 4.0 更新日誌翻譯简体版

原文原文鏈接

前言

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

大改動

環境java

不在支持Nodejs 4。源代碼已經更新到一個較高的ecmascript版本。webpack
使用git
- 你必須在兩種模式中選擇一個（mode或者--mode）： production 或者 development
  - production 會開放全部優化功能去建立一個最優化的包
  - development 開放註釋和提示，並開啓eval devtool功能
  - production 不支持監聽模式，development擁有着更快速的增量構建
  - 你能夠經過optimization.* 的方式去設定更詳細的配置（搭建你的自定義模式）
  - process.env.NODE_ENV變量已經在production和development兩種模式中被設置了（只在構建的代碼裏面，不在配置裏）
  - 還有一種隱藏的none模式, 這種模式禁用了全部東西
語法github
- import()永遠都會返回一個帶命名空間的對象。CommonJS模塊會被包成export的default裏面。
  - 這個極可能會破壞你的代碼，若是你使用import()的方式去導入你的CommonJS代碼。
配置web
- 你不在須要使用這些插件：
  - 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模塊的未使用的導出部分會被消除
優化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