Webpack 新增 stage 模式

webpack 的設定中，process.env.NODE_ENV 只有 development 和 production 兩種模式，在執行專案時，遇到了測試站和正式站呼叫的 API 位置不同，為了避免上正式站時忘記修改 API 位置和其他零零碎碎的設定，所以稍微研究了一下要如何新增新的模式

// package.json
// ...
"scripts": {
    "serve": "cross-env NODE_ENV=development APP_ENV=development webpack serve --mode development",
    "stage": "cross-env NODE_ENV=production APP_ENV=stage webpack --mode production",
    "build": "cross-env NODE_ENV=production APP_ENV=production webpack --mode production"
}
// ...

在上面的 package.json 中，我新增一個 APP_ENV，除了原本的 development 和 production，我多了一個 stage

接著再於 webpack.config.js 加入 DefinePlugin

plugins: [
    new webpack.DefinePlugin({
        'process.env.APP_ENV': JSON.stringify(process.env.APP_ENV),
    })
]

這樣就能在 js 中接到目前的模式，可以依據不同的模式來做設定了

const mode = process.env.APP_ENV;

tags: webpack