寫在前面

在前面文章中介紹了一些webpack配置和特性，能夠提升我們的開發效率，讓開發者能夠有著更好的開發體驗。但是，也伴隨這新的問題出現，打包結果會變得越來越臃腫，因為在這個過程中Webpack為了實現這些特性，會自動往打包結果中添加一些內容。例如之前使用的Source Map會在輸出結果中添加額外的代碼實現相應的功能，但是生產環境和開發環境有所差異，對于生產環境而言注重的運行效率，在開發環境注重的是開發效率。為此，wepack在4.0版本提供了module模式，方便我們在各種環境下進行不同的配置。

不同環境的配置

創建不同的環境配置的方式主要有兩種：

• 在配置文件中添加相應的判斷條件，根據環境不同導出不同配置
• 為不同環境單獨添加一個配置文件，一個環境對應一個配置文件

//webpack.config.js  
module.exports = (env,arg)=>{ 
  //不同模式下公共配置 
  const config = { 
   
  } 
   
  if(env === "development"){ 
    //為config添加開發模式下的特殊配置 
    config.mode = "development" 
    config.devtool = "cheap-eval-module-source-map" 
  }else if(env === "production"){ 
    //為config添加生產模式下的特殊配置 
    config.mode = "production" 
    config.devtool = "nosources-source-map" 
  } 
  return config 
} 

通過上面的配置文件，我們可以在終端運行根據不同環境判斷執行不同的配置，對于大型環境適合在不同環境條件下使用不同的配置。我們可以將公共模式的文件抽取出來，分別設置開發環境和生產環境下的模式文件。

//webpack.common.js 
module.exports = { 
  //公共配置 
} 
 
//webpack.prod.js 
const common = require("./webpack.common") 
module.exports = Object.assign(common,{ 
  //生產模式配置 
}) 
 
//webpack.dev.js 
const common = require("./webpack.common") 
module.exports = Object.assign(common,{ 
  //開發模式配置 
}) 

對于不同環境的配置中，需要先導入公共配置文件，我們在后面對前面的屬性進行覆蓋，但是Object.assign會把之前的完全覆蓋。對于plugins數組我們需要在原先的基礎中添加配置，為此我們需要lodash的merge函數或者webpack社區的webpack-merge插件進行使用。

//webpack.common.js 
module.exports = { 
  //公共配置 
} 
 
//webpack.prod.js 
const merge = require("webpack-merge") 
const common = require("./webpack.common") 
module.exports = merge(common,{ 
  //生產模式配置 
}) 
 
//webpack.dev.js 
const merge = require("webpack-merge") 
const common = require("./webpack.common") 
module.exports = merge(common,{ 
  //開發模式配置 
}) 

在分別配置完成過后，回到命令行終端，嘗試運行webpack打包，不過因為這里已經沒有默認的配置文件，所以需要通過--config參數來指定所使用的配置文件路徑。

$ webpack --config webpack.prod.js 

生產環境下的優化插件

在weback4中新增的production模式下，內部已經自動開啟了很多通用的優化功能，對于使用者而言可以開箱即用。對于學習者而言，開箱即用會導致忽略很多需要了解的東西，以至于出現問題無從下手。

const webpack = require("webpack"); 
 
module.exports = { 
  //其他配置 
  plugins:[ 
    new webpack.DefinePlugin({ 
      API_BASE_URL:"https://api.example.com" 
    }) 
  ] 
} 

我們看到值要求的是一個代碼片段：

const webpack = require("webpack"); 
 
module.exports = { 
  //其他配置 
  plugins:[ 
    new webpack.DefinePlugin({ 
      API_BASE_URL:JSON.stringify("https://api.example.com") 
    }) 
  ] 
} 

參考文章

《webpack原理與實踐》

《webpack中文文檔》

寫在最后

本文介紹了如何在webpack添加不同環境的配置文件，以及在生產模式打包時經常用到的幾個插件。我們可以針對生產環境下的打包進行優化，能夠提升生產環境的運行效率。