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

http://yzkb.51969.com/

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

文章目錄

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

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

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

module.exports = env => {

return {

//配置內(nèi)容

}

}

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

在調(diào)用webpack函數(shù)時(shí)，webpack會(huì)向函數(shù)傳入一個(gè)參數(shù)env，該參數(shù)的值來(lái)自于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}

這樣一來(lái)，我們就可以在命令中指定環(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} // 這種方式只會(huì)復(fù)制對(duì)象的可枚舉屬性，并且不會(huì)執(zhí)行g(shù)etter setter，如果配置很簡(jiǎn)單的話，這種方式也可以

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

}

else {

return {

...baseConfig,

...devConfig

}

}

}

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

http://yzkb.51969.com/

精彩鏈接