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