在Webpack 中建立客製化的環境變數

使用webpack開發的時候常常會需要使用環境變數讓程式碼更容易維護或是判斷狀態，這篇文章將會介紹如何在Webpack中建立客製化的環境變數。

dotenv

這個plugin可以讓我們客製環境變數，首先需要安裝此plugin

npm install dotenv --save

再來在專案的根目錄下建立.env來設定環境變數

// .env
UPLOAD=false
IMG_UPLOAD_URL=https://xxx.com/data/prod-detail/xxx

再來在webpack.common.js中使用plugin，之後再merge到dev、production的設定中。

// webpack.common.js
const dotenv = require('dotenv');
const DOTENV = dotenv.config().parsed;

module.exports = {
    plugins: [
        new webpack.DefinePlugin({ 
            'process.env': JSON.stringify(DOTENV),
        }),
    ],
};

merge到prod中，dev也是同樣操作

// webpack.prod.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const HtmlReplaceWebpackPlugin = require("html-replace-webpack-plugin");

// 取得環境變數
const upload = process.env.UPLOAD === "true";
const uploadImgHost = upload ? process.env.IMG_UPLOAD_URL : "./_img";

module.exports = merge(common, {
    mode: "production",
    plugins: [
        // 替換entry html中的字串
        new HtmlReplaceWebpackPlugin([
            {
                pattern: "./_img",
                replacement: uploadImgHost,
            },
            {
                pattern: "https://www.ieiworld.com",
                replacement: upload ? "" : "https://www.ieiworld.com",
            },
            {
                pattern: "https://new.ieiworld.com",
                replacement: upload ? "" : "https://new.ieiworld.com",
            },
            {
                pattern: "/en/",
                replacement: upload ? "/[SiteInfo_lang_portfolio]/" : "/en/",
            },
            {
                pattern: "/tw/",
                replacement: upload ? "/[SiteInfo_lang_portfolio]/" : "/tw/",
            },
        ]),
    ],
    module: {
        rules: [
            // 替換任何js檔案中的字串
            {
                test: /\.js$/,
                loader: "string-replace-loader",
                options: {
                    search: /\.\/_img/g,
                    replace: uploadImgHost,
                    flags: "g",
                },
            },
        ],
    },
});

如果有把common merge 到 webpack.dev.js 中的話，在js的entry中也可以取得環境變數

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
});

// index.js
const upload = process.env.UPLOAD === "true"; // log false