webpack 4.0.0 release notes

重大改變（Big changes）

• 環境（Environment）

  • 再也不支持Node.js 4。源碼更新到更高的ecmascript環境版本。

• 使用（Usage）

  • 您如今必須在兩種模式之間選擇（使用mode 或--mode）：production 或 development

    • production 模式使用了各類默認的優化配置去生成已經被優化的包
    • development 支持 comments 和 hint，並啓用devtool 的 eval
    • production 不支持watching，development 針對快速增量重建進行了優化
    • production 還能夠實現模塊鏈接（範圍提高 Scope Hoisting）
    • 您也能夠使用optimization.* 來作詳細配置（構建您的自定義模式）
    • process.env.NODE_ENV 被自動設置爲 production 或 development（僅在構建的代碼中，而不在配置中）
    • 有一個隱藏的無模式（--mode none）能夠禁用全部內容

• 語法（Syntax）

  • import() 始終返回命名空間對象。 CommonJS模塊包含在默認導出中

    • 若是您曾經使用import() 導入CommonJs，這可能會破壞您的代碼

• 配置（Configuration）

  • 您再也不須要使用這些插件

    • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors（默認狀況下在生產模式下打開）
    • ModuleConcatenationPlugin -> optimization.concatenateModules（默認狀況下在生產模式下啓用）
    • NamedModulesPlugin - > optimization.namedModules（默認狀況下在開發模式下啓用）
  • CommonsChunkPlugin 被移除 -> optimization.splitChunks，optimization.runtimeChunk

• JSON

  • webpack如今能夠本地處理JSON

    • 在將JSON經過loader轉換爲JS時，您可能須要添加 type: "javascript / auto"
    • 不使用loader 的狀況下使用JSON 仍然有用

  • 容許經過ESM語法導入JSON

    • 經過 export 消除JSON模塊是沒用的（unused exports elimination for JSON modules）

• 優化（Optimization）

  • 升級 uglifyjs-webpack-plugin 到 v1

    • ES15 支持

重大特性（Big features）

• 模塊（Modules）

  • webpack 如今支持一下幾種模塊類型:

    • javascript/auto: ( webpack 3中的默認值）啓用了全部模塊系統的Javascript模塊：CommonJS，AMD，ESM
    • javascript/esm: EcmaScript模塊，全部其餘模塊系統都不可用
    • javascript/dynamic：只有CommonJS和EcmaScript模塊不可用
    • json: JSON數據，可經過require和import得到
    • webassembly/experimental：WebAssembly模塊（目前是實驗性的）

  • 與javascript/auto 相比，javascript/esm 更嚴格地處理ESM：

    • 導入的模塊須要存在導入名稱
    • 動態模塊（non-esm，即CommonJs）只能經過默認導入來導入，其餘一切（包括 namespace import）都會發出錯誤
  • 在.mjs 模塊中默認爲javascript/esm

  • WebAssembly 模塊

    • 能夠導入其餘模塊（JS和WASM）

    • 經過ESM導入驗證WebAssembly模塊的導出

      • 嘗試從WASM導入不存在的導出時，您將收到警告/錯誤

    • 只能在異步塊中使用。 它們在初始塊中不起做用（對Web性能不利）

      • 經過import() 使用WASM導入模塊
    • 這是一個實驗性特徵和變化主題

• 優化（Optimization）

  • sideEffects: false 在package.json 中被支持

    • sideEffects 在package.json中還支持glob表達式和glob表達式數組
  • 使用JSONP數組而不是JSONP函數 -> 異步腳本標記支持，順序再也不重要
  • 引入了新的optimization.splitChunks 選項, 詳情: https://gist.github.com/sokra...

  • 如今經過webpack 自己刪除了無用分支

    • 以前：經過Uglify 刪除了無用代碼
    • 如今：經過webpack刪除無用代碼（在某些狀況下）
    • 這能夠防止在無用分支中發生import() 時崩潰

• 語法（Syntax）

  • import() 的magic comment支持webpackInclude 和webpackExclude。 它們容許在使用動態表達式時過濾文件。

  • 使用System.import() 如今會發出警告

    • 您能夠設置Rule.parser.system: true 來禁用警告
    • 您能夠設置Rule.parser.system: false 來禁用System.import

• 配置（Configuration）

  • 如今能夠使用module.rules[].resolve 配置解析。它能夠與全局配置合併
  • optimization.minimize 中已添加on/off 開關以切換最小化
  • optimization.minimize 中已添加minimizers 和options 配置

• 使用（Usage）

  • 驗證了一些插件選項
  • CLI已移至webpack-cli，您須要安裝webpack-cli 才能使用CLI

  • ProgressPlugin（--progress）如今顯示插件名稱

    • 至少對於遷移到新插件系統的插件是能夠的

• 性能（Performance）

  • UglifyJs 如今默認緩存（caches）和並行化（parallizes）
  • 多項性能改進，尤爲適用於更快的增量重建
  • RemoveParentModulesPlugin的性能改進

• 統計

  • 統計信息能夠顯示嵌套在鏈接模塊中的模塊

特性（Features）

• 配置（Configuration）

  • 爲mjs，json和wasm擴展自動選擇模塊類型。 其餘擴展須要經過module.rules[].type 來配置
  • 不正確的options.dependencies 配置將拋出錯誤
  • sideEffects 能夠經過module.rules覆蓋

  • output.hashFunction 能夠是自定義散列函數的構造函數

    • 出於性能緣由，您能夠提供非加密哈希函數
  • 添加output.globalObject 配置選項以容許在運行時exitCode 中選擇全局對象引用

• 運行時（Runtime）

  • 塊（chunk）加載的錯誤如今包括更多信息和兩個新屬性類型（type）和請求（request）。

• Devtool

  • 從SourceMaps和eval中移除comment footer
  • 在eval source map devtool plugin中添加include test 和exclude 支持

• 性能（Performance）

  • webpacks AST能夠直接從loader傳遞給webpack，以免額外的解析
  • 未使用的模塊再也不作沒必要要的串聯
  • 添加一個ProfilingPlugin，用於編寫（Chrome）包含插件時序的配置文件
  • 使用for of 而不是forEach
  • 使用Map 和 Set 來代替Objects
  • 使用includes 來代替indexOf
  • 用字符串方法替換了一些RegExp
  • 隊列中不會重複進入相同的任務
  • 默認狀況下，使用更快的md4哈希進行散列

• 優化（Optimization）

  • 當使用超過25個導出時，損壞的導出名稱會更短。
  • 腳本標籤再也不是text/javascript和async，由於這是默認值（節省幾個字節）
  • 鏈接模塊如今產生的代碼更少
  • 常量替換如今不須要__webpack_require__ 且省略了參數

• 默認（Defaults）

  • webpack 默認按此順序查找.wasm，.mjs，.js和.json 擴展名
  • output.pathinfo 如今默認在development 模式下開啓
  • in-memory 緩存在production 中默認關閉
  • entry 默認指向路徑 ./src
  • 在省略mode 選項時默認使用production 模式

• 使用（Usage）

  • 向SourceMapDevToolPlugin 添加詳細的進度報告
  • 刪除插件時提供有用的錯誤消息

• 統計（stats）

  • 在統計中大小的顯示使用kiB 代替kB
  • 入口點（entrypoints）默認顯示在統計信息中
  • chunks 在統計中顯示<{parents}> >{children}< 和 ={siblings}=
  • 添加buildAt 時間到統計中
  • 統計json 文件包含輸出路徑

• 語法（Syntax）

  • 上下文（context）中支持資源查詢
  • 在import() 中引用入口點（entry point）名稱如今會發出錯誤而不是警告
  • 升級到acorn 5 並支持ES 2018

• 插件（Plugins）

  • done 如今是異步鉤子

Bug 修復（Bugfixes）

• 生成的註釋不在*/ 中中斷
• webpack再也不修改傳遞的選項對象（options object）
• Compiler "watch-run" hook 如今做爲 Compiler 的第一個參數
• 將output.chunkCallbackName 添加到schema 以容許配置Web Worker 模板
• 使用module.id/loaded 正確地避免了模塊連接（Module Concatentation）（Scope Hoisting）
• OccurenceOrderPlugin 如今按正確的順序對模塊進行排序（而不是顛倒）
• 調用Watching.invalidate時，會從觀察者讀取文件的時間戳
• 修正不正確的-！ 在post loaders中
• 添加run 和watchRun hooks for MultiCompiler
• 在ESM 中this 顯示undefined
• VariableDeclaration 被正確識別爲var，const或let
• 當使用模塊類型爲javascript/dynamic 或javascript/module 時，Parser如今使用正確的資源類型（module/script）解析源代碼。
• 不在當buildMeta 爲null的缺失模塊時崩潰
• 爲electron targets 添加original-fs 模塊
• HMRPlugin 能夠在plugins 以外添加到Compiler 中

內部變化（Internal changes）

• 使用tap 調用替換了plugin 調用（新的插件系統）
• 將許多已棄用的插件遷移到新的插件系統API
• 爲json模塊添加了buildMeta.exportsType: "default"
• 從Parser 中刪除無用的方法（parserStringArray，parserCalculatedStringArray）
• 移除清除BasicEvaluatedExpression 和多種類型的功能
• 使用Buffer.from 代替 new Buffer
• 避免使用forEach，使用for of 代替
• 使用neo-async 代替async
• 更新tapable 和enhanced-resolve 依賴關係到新的主要版本
• 使用prettier

移除特性（Removed features）

• 移除 module.loaders
• 移除 loaderContext.options
• 移除 Compilation.notCacheable flag
• 移除 NoErrorsPlugin
• 移除 Dependency.isEqualResource
• 移除 NewWatchingPlugin
• 移除 CommonsChunkPlugin

plugins/loaders突破性更新（Breaking changes for plugins/loaders）

• 全新的插件系統

  • plugin 方法向後兼容
  • 插件中如今應該使用Compiler.hooks.xxx.tap（<plugin name>，fn）
• 新的主要版本 - enhanced-resolve
• Templates for chunks 如今能夠生成多個資源（multiple assets）
• Chunk.chunks/parents/blocks 再也不是Arrays。 內部使用Set，有方法能夠訪問它
• Parser.scope.renames 和 Parser.scope.definitions 不在使用 Objects/Arrays, 而是 Map/Sets
• Parser 使用 StackedSetMap (相似LevelDB的數據結構) 代替 Arrays
• 應用插件時再也不設置Compiler.options
• 因爲重構，Harmony Dependencies已經改變
• Dependency.getReference() 如今可能返回一個weak 屬性。Dependency.weak 如今由Dependency 基類使用，並在getReference() 的基本impl中返回
• 全部Module 的構造函數參數都已更改
• 將選項合併到ContextModule 和resolveDependencies的options對象中
• 更改並重命名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 能夠使用它來建立相對於應用程序根目錄的東西
• 啓用HMR時，將this.hot標誌添加到loader 上下文
• buildMeta.harmony 已替換爲buildMeta.exportsType: "namespace"

• chunk 圖已更改：

  • 以前：Chunks 以父子關係相關聯。
  • 如今：ChunkGroups 以父子關係相關聯。 ChunkGroups 按順序包含Chunks
  • 以前：AsyncDependenciesBlocks 按順序引用Chunks 的列表
  • 如今：AsyncDependenciesBlocks 引用單個 ChunkGroup
• file/contextTimestamps 如今是Maps
• map/foreach Chunks/Modules/Parents 方法已經被 廢棄/移除
• NormalModule 接受Constructor中的選項對象（options object）
• 爲NormalModule 添加了必需的生成器參數
• 爲NormalModuleFactory 添加了createGenerator 和generator hooks 以自定義代碼生成
• 容許經過鉤子自定義Chunks 的渲染清單

參考

webpack 4.0.0 release notes github原文