官方文檔:webpack.DefinePlugin
參考文檔:實用webpack插件之DefinePlugin
DefinePlugin 允許創(chuàng)建一個在編譯時可以配置的全局常量。這可能會對開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的行為非常有用烙心。如果在開發(fā)構(gòu)建中恶迈，而不在發(fā)布構(gòu)建中執(zhí)行日志記錄狡逢，則可以使用全局常量來決定是否記錄日志硕蛹。這就是 DefinePlugin 的用處掺栅，設(shè)置它冗澈，就可以忘記開發(fā)和發(fā)布構(gòu)建的規(guī)則馏颂。
-
用法
- 每個傳進(jìn) DefinePlugin 的鍵值都是一個標(biāo)志符或者多個用 . 連接起來的標(biāo)志符示血。
- 如果這個值是一個字符串，它會被當(dāng)作一個代碼片段來使用救拉。
- 如果這個值不是字符串难审，它會被轉(zhuǎn)化為字符串(包括函數(shù))。
- 如果這個值是一個對象亿絮，它所有的 key 會被同樣的方式定義告喊。
- 如果在一個 key 前面加了 typeof,它會被定義為 typeof 調(diào)用。
- 這些值會被內(nèi)聯(lián)進(jìn)那些允許傳一個代碼壓縮參數(shù)的代碼中派昧，從而減少冗余的條件判斷黔姜。
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
注意，因為這個插件直接執(zhí)行文本替換蒂萎，給定的值必須包含字符串本身內(nèi)的實際引號秆吵。通常，有兩種方式來達(dá)到這個效果五慈，使用 '"production"', 或者使用 JSON.stringify('production')纳寂。
簡而言之:
1 這是一個定義全局變量的插件,定義的變量可以在webpack打包范圍內(nèi)任意javascript環(huán)境內(nèi)訪問,甚至在項目根目錄之外的js里也可以使用(
前提是這個js被項目引用)!
2 使用字符串或JSON.stringify()轉(zhuǎn)換值,推薦使用JSON.stringify(),可以轉(zhuǎn)換json對象
config/env.js
const env = process.env.NODE_ENV;
const config = {
development: {
api: 'www.baidu.com'
},
production: {
api: 'www.jd.com'
}
};
module.exports = config[env];
webpack.config.js
const envConfig= require('./config/env');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
envConfig: JSON.stringify(envConfig)
})
]
...
}
index.js
console.log(envConfig)
運行結(jié)果:
運行結(jié)果
