前言
這是webpack實(shí)戰(zhàn)系列筆記的第10篇記錄——生產(chǎn)環(huán)境配置【上篇】鸯两。
在前面的幾篇中蒸苇，介紹了webpack的大部分使用方法咬像，使用其實(shí)就是為了上線沮峡，牽扯到生產(chǎn)環(huán)境疚脐，就會(huì)出現(xiàn)新的問題，比如：
- 如何讓用戶更快的加載資源
- 如何壓縮資源
- 如何添加環(huán)境變量?jī)?yōu)化打包
- 如何最大限度的利用緩存
- ...
在生產(chǎn)環(huán)境配置篇中邢疙，將會(huì)一一介紹棍弄。本篇大致分為三個(gè)小篇，以上中下結(jié)構(gòu)拆開描述疟游。本篇描述：環(huán)境配置的封裝呼畸、開啟production模式、環(huán)境變量颁虐。
1. 環(huán)境變量的使用
在開發(fā)環(huán)境中蛮原，我們?cè)O(shè)置過mode模式，而生產(chǎn)環(huán)境中另绩，我們這需要更多的配置儒陨，如：mode、環(huán)境變量笋籽、版本號(hào)等蹦漠，webpack可以使用兩種方式來按照不同環(huán)境采用不同配置。
1.1 使用相同配置文件
例如之前的webpack.config.js车海，可以在構(gòu)建開始前將當(dāng)前環(huán)境作為一個(gè)變量傳進(jìn)去笛园，然后在js中通過判斷來決定使用某個(gè)配置：
// package.json
{
...
"scripts": {
"dev": "ENV=development webpack-dev-server",
"build": "ENV=production webpack"
}
}
// webpack.config.js
const ENV = process.env.ENV;
const isProd = ENV === 'production';
module.exports = {
output: {
filename: isProd ? 'bundle@[chunkhash].js' : 'bundle.js'
},
mode: ENV,
}
從上配置可以看出，首先通過npm腳本傳入了一個(gè)ENV的環(huán)境變量侍芝，而后在輸出時(shí)研铆，webpack中用三元表達(dá)式判斷環(huán)境，生產(chǎn)環(huán)境則添加哈希值為版本信息州叠，本地則直接輸出棵红。
1.2 多配置文件
顧名思義：為不同環(huán)境創(chuàng)建不同的配置信息文件。
例如留量，可以單獨(dú)創(chuàng)建一個(gè)webpack.development.config.js來配置開發(fā)環(huán)境信息窄赋，再創(chuàng)建一個(gè)webpack.production.config.js來配置生產(chǎn)環(huán)境信息。然后在package.json中修改：
{
...
"scripts": {
"dev": "webpack-dev-server --config=webpack.development.config.js",
"build": "webpack --config=webpack.prodection.config.js"
}
}
可以看到楼熄，上述的json文件中忆绰，通過 --config 來指定了打包時(shí)用哪一個(gè)文件，但其實(shí)會(huì)有一些小問題可岂，比如兩個(gè)配置文件會(huì)有重復(fù)的內(nèi)容错敢，不利于維護(hù)等，這時(shí)可以將重復(fù)配置提取出來寫成公共配置文件，比如再新建一個(gè)文件 webpack.common.config.js 來存放公共部分：
// webpack.common.config.js
module.exports = {
entry: './src/index.js',
// 公共配置
...
}
寫完之后稚茅，在開發(fā)與生產(chǎn)環(huán)境的webpack配置文件中纸淮，都引入該公共文件，然后加上自身的專屬配置即可亚享。
2. production模式
在前面我們多次用到一個(gè)叫做mode的配置咽块，其實(shí)這個(gè)配置時(shí)webpack4及之后才新添加的一個(gè)配置項(xiàng)，開發(fā)者可以直接使用這個(gè)配置來切換打包模式欺税。例如：
// webpack.config.js
module.exports = {
...
mode: 'production'
}
這便意味著當(dāng)前模式處于生產(chǎn)環(huán)境侈沪，那么webpack則會(huì)自動(dòng)添加許多適用于生產(chǎn)環(huán)境的配置項(xiàng)，減少手動(dòng)操作配置晚凿。而目的也是為了提供更加有利的開發(fā)環(huán)境亭罪，更少的代碼，更少的配置歼秽，做更多的事兒应役。
然而，多數(shù)情況下燥筷，僅僅配置mode是難以達(dá)到我們希望的需求的箩祥，因此還是需要用到其他與生產(chǎn)環(huán)境配置相關(guān)聯(lián)的其他配置項(xiàng)。
3. 環(huán)境變量
通常荆责，我們需要為生產(chǎn)環(huán)境和本地環(huán)境添加不同的環(huán)境變量滥比，在webpack中可以試用DefinePlugin來進(jìn)行設(shè)置亚脆。
3.1 字符串類型
如：
// webpack.config.js
const webpack = require('webpack');
module.exports = {
entry:'./src/index.js',
output: {
filename: 'bundle.js'
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify('production')
})
]
}
// index.js
console.log(ENV);
如上所示做院。通過配置DefinePlugin設(shè)置了ENV的環(huán)境變量，最終頁(yè)控制臺(tái)上打印的字符串會(huì)是production濒持。
- 注意
上面用到了JSON.stringify键耕，因?yàn)镈efinePlugin在替換環(huán)境變量時(shí)對(duì)于字符串類型的值是完全替換，如果不加的話柑营，在替換后就會(huì)成為變量名而不是字符串屈雄。因此需要添加JSON.stringify。
3.2 其他類型
在上面演示了字符串類型官套，當(dāng)然也可以設(shè)置其他類型的環(huán)境變量酒奶。
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify('production'),
IS_PRODUCTION: true,
ENV_ID: 80808888,
CONSTANTS: JSON.stringify(){
TYPES: ['foo', 'bar']
}
})
]
}
3.3 其他說明
很多框架中都會(huì)采用process.env.NODE_ENV來作為一個(gè)區(qū)別開發(fā)環(huán)境和生產(chǎn)環(huán)境的變量。
- process.env是Node.js用于存放當(dāng)前進(jìn)程環(huán)境變量的對(duì)象
- NODE_ENV則可以讓開發(fā)者指定當(dāng)前的運(yùn)行時(shí)環(huán)境奶赔，值為production時(shí)代表生產(chǎn)環(huán)境惋嚎。
在上述中，當(dāng)庫(kù)和框架在打包時(shí)如果發(fā)現(xiàn)是生產(chǎn)環(huán)境站刑，那么就會(huì)去掉一些開發(fā)環(huán)境中的代碼和配置另伍，如警告信息，日志打印绞旅，斷點(diǎn)等摆尝，也有助于提升生產(chǎn)環(huán)境的代碼運(yùn)行速度温艇，并且優(yōu)化包體積。
具體配置如下：
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
process.env.NODE_ENV: 'production'
})
]
}
如果啟用了mode: production堕汞，那么webpack則已經(jīng)設(shè)置好了process.env.NODE_ENV勺爱，自己則無需再手動(dòng)操作
小結(jié)
本篇描述了關(guān)于生產(chǎn)環(huán)境的一些配置：環(huán)境變量的使用，配置文件描述讯检，生產(chǎn)模式開啟邻寿，環(huán)境變量自定義配置等。從這幾個(gè)方面入手都可以對(duì)生產(chǎn)環(huán)境產(chǎn)生一些有利影響视哑。
下一篇更新從 [source map] 方面和 [ 資源壓縮 ] 方面進(jìn)行配置和優(yōu)化處理绣否。
更多關(guān)于webpack的基礎(chǔ)講解和進(jìn)階及性能調(diào)優(yōu)方面歡迎關(guān)注公眾號(hào)【流眸】回復(fù)關(guān)鍵詞【webpack】獲取~
