webpack4 Mode的默認設置

wua_wua2012 發布于2019-08-22 15:21 / 936人閱讀

摘要：功能強大，有很多獨特的功能，但其中一個難點是配置文件。為此團隊改變了這一現狀默認不需要配置文件。每個選項的默認配置如下指兩個配置項都存在的屬性中解決了的會被刪除刪除空的合并重復的調試緩存模塊避免在未更改時重建它們。

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

云服務器 GPU云服務器默認設置設置默認按鈕默認首頁設置應用設置默認

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93401.html

webpack4新特性介紹

摘要：當下最流行的模塊打包器于年月日正式發布版本，代號。從官方的發布日志來看本次大版本更新帶來了很多新特性更新和改善，這將會讓的配置更加簡單。本文，筆者將會全面介紹的新特性及實踐。只支持模塊，目前處于試驗階段。導語: webpack是一個JS應用打包器, 它將應用中的各個模塊打成一個或者多個bundle文件。借助loaders和plugins，它可以改變、壓縮和優化各種各樣的文件。它的輸入...

NotFound 2019-08-22 15:42 評論0 收藏0
webpack4.0初體驗、各版本及parcel性能對比

摘要：前段時間又發布了新版本我接觸的時候已經版本了支持的版本必須打包速度大小比較以及粗淺的試了一下下圖所示，黃色為版本綠色為我寫的配置，跟基本相似，具體不同下面會介紹藍色是自帶的模式紅色為具體大小速度大家可以比較一下，還是很給力的關于配置方面，應前段時間webpack又發布了新版本webpack4我接觸的時候已經4.1版本了node支持的版本必須node: >=6.11.5 webpack...

MarvinZhang 2019-08-22 15:11 評論0 收藏0
webpack4 配置解析和實戰

摘要：特性比較熱門的兩大特性，零配置和速度快號稱提速上限一般情況下，相比于低版本，場景下第三方依賴打包速度和場景下本地服務首次啟動速度都得到顯著提升零配置通過指定當前場景為開發模式還是生產模式，自動設置好當前場景的默認配置，用戶即可馬上使用，不需 webpack4特性 webpack4比較熱門的兩大特性，零配置和速度快（號稱提速上限98%）一般情況下，webpack4相比于低版本，prod...

王笑朝 2019-08-26 12:09 評論0 收藏0
如何優雅的升級到 webpack4

摘要：默認出入口在中，不再強制要求指定和路徑。構建模式提供了兩種構建模式可供選擇和選項描述會將的值設為。如果是，那就會開啟。默認只會對按需加載的代碼做分割。在或更低版本中，如果你想為一個推導出來的定制選項，你不得不在自己的選項中將它重復一遍。前言現在距離2018年2月15號webpack4.0.0出來已經有一段時間了，現在已經出了 @vue/cli 3.0，但是樓主還沒試過，聽說很強大，...

zhangfaliang 2019-08-22 18:36 評論0 收藏0
webpack@4.32.2研究筆記【02】- mode

摘要：簡介模式是新增的配置，用來指定使用對應模式的內置優化它有三個可選模式默認為。源碼地址選項描述通過插件將的值設為。啟用和通過插件將的值設為。使用默認的優化項。注意上面說的并不是的運行環境變量，它其實是通過插件設置的一個全局變量。簡介 ? mode（模式）是webpack4.0.0新增的配置，用來指定webpack使用對應模式的內置優化；它有三個可選模式：producti...

newtrek 2019-08-23 17:51 評論0 收藏0