寫在前面

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

不同環(huán)境的配置

創(chuàng)建不同的環(huán)境配置的方式主要有兩種：

• 在配置文件中添加相應(yīng)的判斷條件，根據(jù)環(huán)境不同導(dǎo)出不同配置
• 為不同環(huán)境單獨添加一個配置文件，一個環(huán)境對應(yīng)一個配置文件

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

通過上面的配置文件，我們可以在終端運行根據(jù)不同環(huán)境判斷執(zhí)行不同的配置，對于大型環(huán)境適合在不同環(huán)境條件下使用不同的配置。我們可以將公共模式的文件抽取出來，分別設(shè)置開發(fā)環(huán)境和生產(chǎn)環(huán)境下的模式文件。

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

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

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

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

$ webpack --config webpack.prod.js 

生產(chǎn)環(huán)境下的優(yōu)化插件

在weback4中新增的production模式下，內(nèi)部已經(jīng)自動開啟了很多通用的優(yōu)化功能，對于使用者而言可以開箱即用。對于學(xué)習(xí)者而言，開箱即用會導(dǎo)致忽略很多需要了解的東西，以至于出現(xiàn)問題無從下手。

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添加不同環(huán)境的配置文件，以及在生產(chǎn)模式打包時經(jīng)常用到的幾個插件。我們可以針對生產(chǎn)環(huán)境下的打包進行優(yōu)化，能夠提升生產(chǎn)環(huán)境的運行效率。