柚子快報(bào)激活碼778899分享：webpack 區(qū)分環(huán)境

http://yzkb.51969.com/

區(qū)分環(huán)境 {ignore}

文章目錄

區(qū)分環(huán)境 {ignore}

有些時候，我們需要針對生產(chǎn)環(huán)境和開發(fā)環(huán)境分別書寫webpack配置

為了更好的適應(yīng)這種要求，webpack允許配置不僅可以是一個對象，還可以是一個函數(shù)

module.exports = env => {

return {

//配置內(nèi)容

}

}

在開始構(gòu)建時，webpack如果發(fā)現(xiàn)配置是一個函數(shù)，會調(diào)用該函數(shù)，將函數(shù)返回的對象作為配置內(nèi)容，因此，開發(fā)者可以根據(jù)不同的環(huán)境返回不同的對象

在調(diào)用webpack函數(shù)時，webpack會向函數(shù)傳入一個參數(shù)env，該參數(shù)的值來自于webpack命令中給env指定的值，例如

npx webpack --env abc # env: "abc"

npx webpack --env.abc # env: {abc:true}

npx webpack --env.abc=1 # env： {abc:1}

npx webpack --env.abc=1 --env.bcd=2 # env: {abc:1, bcd:2}

這樣一來，我們就可以在命令中指定環(huán)境，在代碼中進(jìn)行判斷，根據(jù)環(huán)境返回不同的配置結(jié)果。

var baseConfig = require("./webpack.base")

var devConfig = require("./webpack.dev")

var proConfig = require("./webpack.pro")

const { merge } = require('webpack-merge');

module.exports = function (env) {

if (env && env.prod) {

return {...baseConfig,...proConfig} // 這種方式只會復(fù)制對象的可枚舉屬性，并且不會執(zhí)行g(shù)etter setter，如果配置很簡單的話，這種方式也可以

return merge(baseConfig, proConfig); // 推薦

}

else {

return {

...baseConfig,

...devConfig

}

}

}

柚子快報(bào)激活碼778899分享：webpack 區(qū)分環(huán)境

http://yzkb.51969.com/

精彩鏈接