webpack實戰——生產環境配置【上】

前言

這是webpack實戰系列筆記的第10篇記錄——生產環境配置【上篇】。

在前面的幾篇中，介紹了webpack的大部分使用方法，使用其實就是爲了上線，牽扯到生產環境，就會出現新的問題，比如：

• 如何讓用戶更快的加載資源
• 如何壓縮資源
• 如何添加環境變量優化打包
• 如何最大限度的利用緩存
• ...

在生產環境配置篇中，將會一一介紹。本篇大致分爲三個小篇，以上中下結構拆開描述。本篇描述：環境配置的封裝、開啓production模式、環境變量。

1. 環境變量的使用

在開發環境中，我們設置過mode模式，而生產環境中，我們這需要更多的配置，如：mode、環境變量、版本號等，webpack可以使用兩種方式來按照不同環境採用不同配置。

1.1 使用相同配置文件

例如之前的webpack.config.js，可以在構建開始前將當前環境作爲一個變量傳進去，然後在js中通過判斷來決定使用某個配置：

// 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腳本傳入了一個ENV的環境變量，而後在輸出時，webpack中用三元表達式判斷環境，生產環境則添加哈希值爲版本信息，本地則直接輸出。

1.2 多配置文件

顧名思義：爲不同環境創建不同的配置信息文件。

例如，可以單獨創建一個webpack.development.config.js來配置開發環境信息，再創建一個webpack.production.config.js來配置生產環境信息。然後在package.json中修改：

{
    ...
    "scripts": {
        "dev": "webpack-dev-server --config=webpack.development.config.js",
        "build": "webpack --config=webpack.prodection.config.js"
    }
}

可以看到，上述的json文件中，通過 --config 來指定了打包時用哪一個文件，但其實會有一些小問題，比如兩個配置文件會有重複的內容，不利於維護等，這時可以將重複配置提取出來寫成公共配置文件，比如再新建一個文件 webpack.common.config.js 來存放公共部分：

// webpack.common.config.js
module.exports = {
    entry: './src/index.js',
    // 公共配置
    ...
}

寫完之後，在開發與生產環境的webpack配置文件中，都引入該公共文件，然後加上自身的專屬配置即可。

2. production模式

在前面我們多次用到一個叫做mode的配置，其實這個配置時webpack4及之後才新添加的一個配置項，開發者可以直接使用這個配置來切換打包模式。例如：

// webpack.config.js
module.exports = {
    ...
    mode: 'production'
}

這便意味着當前模式處於生產環境，那麼webpack則會自動添加許多適用於生產環境的配置項，減少手動操作配置。而目的也是爲了提供更加有利的開發環境，更少的代碼，更少的配置，做更多的事兒。

然而，多數情況下，僅僅配置mode是難以達到我們希望的需求的，因此還是需要用到其他與生產環境配置相關聯的其他配置項。

3. 環境變量

通常，我們需要爲生產環境和本地環境添加不同的環境變量，在webpack中可以試用DefinePlugin來進行設置。

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設置了ENV的環境變量，最終頁控制檯上打印的字符串會是production。

• 注意
  上面用到了JSON.stringify，因爲DefinePlugin在替換環境變量時對於字符串類型的值是完全替換，如果不加的話，在替換後就會成爲變量名而不是字符串。因此需要添加JSON.stringify。

3.2 其他類型

在上面演示了字符串類型，當然也可以設置其他類型的環境變量。

// 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 其他說明

很多框架中都會採用process.env.NODE_ENV來作爲一個區別開發環境和生產環境的變量。

• process.env是Node.js用於存放當前進程環境變量的對象
• NODE_ENV則可以讓開發者指定當前的運行時環境，值爲production時代表生產環境。

在上述中，當庫和框架在打包時如果發現是生產環境，那麼就會去掉一些開發環境中的代碼和配置，如警告信息，日誌打印，斷點等，也有助於提升生產環境的代碼運行速度，並且優化包體積。

具體配置如下：

// webpack.config.js
module.exports = {
    ...

    plugins: [
        new webpack.DefinePlugin({
            process.env.NODE_ENV: 'production'
        })
    ]
}

如果啓用了mode: production，那麼webpack則已經設置好了process.env.NODE_ENV，自己則無需再手動操作

小結

本篇描述了關於生產環境的一些配置：環境變量的使用，配置文件描述，生產模式開啓，環境變量自定義配置等。從這幾個方面入手都可以對生產環境產生一些有利影響。

下一篇更新從 [source map] 方面和 [ 資源壓縮 ] 方面進行配置和優化處理。

---

更多關於webpack的基礎講解和進階及性能調優方面歡迎關注公衆號【流眸】回覆關鍵詞【webpack】獲取~