webpack4入門筆記——打包模式選擇

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-06
Web筆記模式

什麼是mode

webpack4增加了mode配置項，這樣會做一些預設的工作，一定程度上解決了webpacke配置複雜的弊端。

語法

mode:'development|production'
複製程式碼

不配置預設是production，這是2種模式都會做下工作

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

development

開發模式，即在開發時使用此模式，主要做了以下工作（瞭解即可）

1 . 預設配置以下外掛

//官方給的
plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
]
複製程式碼

2 . 其他配置（網上的）

  • 開啟dev-tool，方便瀏覽器除錯（不需要再配置devtool: 'inline-source-map'）
  • 開啟output.pathinfo，在產出的bundle中顯示模組路徑資訊
  • 開啟NamedModulesPlugin（熱載入不需要再配）
  • 開啟NoEmitOnErrorsPlugin
  • 提供詳細的錯誤提示
  • 利用快取機制，實現快速構建

下面這個貌似更全些

//除錯
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

產品模式，即專案上線時用使用這個模式打包，主要做了以下工作（瞭解即可）

1 . 預設配置以下外掛（官方給的）

plugins: [
    // 程式碼壓縮
    new UglifyJsPlugin(/* ... */), //不需要再配置壓縮
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
]
複製程式碼

2 . 其他配置（網上的）

//效能相關配置
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=production
複製程式碼

相關文章