webpack4 Mode的預設設定

webpack功能強大，有很多獨特的功能，但其中一個難點是配置檔案。為此,webpack團隊改變了這一現狀：webpack 4預設不需要配置檔案。可以透過mode選項為webpack指定一些預設的配置。mode分為development/production,預設為production。每個選項的預設配置如下(common指兩個配置項都存在的屬性):

common

//parent chunk中解決了的chunk會被刪除
optimization.removeAvailableModules:true
//刪除空的chunks
optimization.removeEmptyChunks:true
//合併重複的chunk
optimization.mergeDuplicateChunks:true

development

//除錯
devtool:eval
//快取模組, 避免在未更改時重建它們。
cache:true
//快取已解決的依賴項, 避免重新解析它們。
module.unsafeCache:true
//在 bundle 中引入「所包含模組資訊」的相關注釋
output.pathinfo:true
//在可能的情況下確定每個模組的匯出,被用於其他最佳化或程式碼生成。
optimization.providedExports:true
//找到chunk中共享的模組,取出來生成單獨的chunk
optimization.splitChunks:true
//為 webpack 執行時程式碼建立單獨的chunk
optimization.runtimeChunk:true
//編譯錯誤時不寫入到輸出
optimization.noEmitOnErrors:true
//給模組有意義的名稱代替ids
optimization.namedModules:true
//給模chunk有意義的名稱代替ids
optimization.namedChunks:true

production

//效能相關配置
performance:{hints:"error"....}
//某些chunk的子chunk已一種方式被確定和標記,這些子chunks在載入更大的塊時不必載入
optimization.flagIncludedChunks:true
//給經常使用的ids更短的值
optimization.occurrenceOrder:true
//確定每個模組下被使用的匯出
optimization.usedExports:true
//識別package.json or rules sideEffects 標誌
optimization.sideEffects:true
//嘗試查詢模組圖中可以安全連線到單個模組中的段。- -
optimization.concatenateModules:true
//使用uglify-js壓縮程式碼
optimization.minimize:true

webpack執行時還會根據mode設定一個全域性變數process.env.NODE_ENV,這裡的process.env.NODE_ENV不是node中的環境變數,而是webpack.DefinePlugin中定義的全域性變數,允許你根據不同的環境執行不同的程式碼.
圖片描述

例如:

if(process.env.NODE_ENV === 'development'){
    //開發環境 do something
}else{
    //生產環境 do something
}

最終將編譯成

if(true){
   //開發環境 do something
}else{
   //生產環境 do something
}

生產環境下,uglify打包程式碼時會自動刪除不可達程式碼,也就是說生產環境壓縮後最終的程式碼為:

  //生產環境 do something

webpack4 Mode的預設設定

common

相關文章