webpack配置學習二-開發環境和打包環境執行不一樣打包

分開配置的緣由

前端項目的開發在開發過程當中和上線時須要的依賴是不一樣的，因此要求使用webpack打包的時候要可以在兩種狀況下執行不一樣的配置。帶來的好處是上線的項目不依賴開發下的包，減小生產環境中所須要請求的依賴從而提高頁面的性能。

常見的作法

使用不一樣的配置文件

在項目的中建立兩個配置文件，分別對應的開發環境和生產環境。由於兩個配置文件有不少共通的基礎配置，能夠經過引入公共配置的方法減小重複的配置代碼。例如，建立名爲webpack.base.config.js的文件，該文件中寫入共通的基礎配置代碼。分別建立名爲webpack.dev.config.js和webpack.prod.config.js，分別對應開發時和上線時的配置文件。在這兩個文件頭部引入webpack.base.config.js，根據需求在基本配置的基礎上添加各自個性化的配置需求。

在package.json中的scripts屬性中配置開發打包命令和上線打包命令，指定不一樣的配置文件。例如{"scripts":{"build":"webpack --config webpack.prod.config.js","dev":"webpack --config webpack.dev.config.js"}}。這樣就能夠實現了不一樣的配置文件對開發和生產兩種環境下個性化打包需求。

完成這些工做以後就能夠在命令行中經過npm run build和npm run dev來執行package中配置的腳本了。

使用環境變量參數

當開發環境和生產環境依賴的包差異不太大的時候，爲了簡單還能夠將全部的配置寫在一個配置文件之中，經過讀取參數的方式輸出不一樣的配置對象。
方法是首先配置基本的配置項，而後判斷當前是否處於開發狀態下，若是是開發狀態往配置項裏面添加配置。例如配置對象是config，若是當前是開發狀態，須要添加plugin。則config.plugin.push(new webpackHtmlPlugin())。

傳參的方式

判斷的方式是在package.json中腳本加上環境變量NODE_ENV，例如
{"scripts":{"build":"NODE_ENV=production webpack --config webpack.config.js","dev":"NODE_ENV=deveploment webpack --config webpack.config.js"}}

讀參的方式

const isDev = process.env.NODE_ENV === 'development'