webpack區分不同環境的api url

常常我們會把「前端本身跑專案的方式的環境」跟「開發流程的環境」搞混，都是叫做環境，但是我當初也是搞了很久才弄懂（汗

 

前端的專案環境通常由 webpack 區分成：

• development：在本地跑起node serve專案，為方便開發而使用的方式。
• production：webpack打包後產生的靜態檔案，會排除沒用到的依賴，部署要用的就是這種打包檔，一般會放在/dist裡。

開發流程環境通常會區分以下幾種：

• development：工程師自己再開發的時候使用的環境。
• sit：如果公司有QA團隊，這個環境會給QA測試。
• uat：通過QA測試之後，會放到uat環境給客戶測試（到這邊都還只是測試）
• production：正式環境，就是一般使用者會看到的釋出版本。

後端也會這樣區分，所以會關乎到你api路徑的設定。

---

 

package.json

原本我們起專案的指令，會有dev（或是serve）和build

{
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js",
    "build": "webpack --config ./build/webpack.config.js",
    "start": "PORT=8080 serve -s dist",
  },
}

 這時候我們development環境和production環境要加上參數去區分，假設我們先分成sit和production環境就好。

修改指令如下：

{
  "scripts": {
    "dev": "webpack-dev-server --env.api=SIT --config ./build/webpack.config.js",
    "dev:prod": "webpack-dev-server --config ./build/webpack.config.js",
    "build": "webpack --env.api=SIT --config ./build/webpack.config.js",
    "build:prod": "webpack --config ./build/webpack.config.js",
    "start": "PORT=8080 serve -s dist",
  },
}

可以看到我先增了兩個指令：dev:prod、build:prod

然後在原本的dev指令和build指令都加上一個api的參數，他們的值都是字串的"SIT"

也就是說我可以在dev環境跑sit或是production的api，build環境也同理。

所以整理一下目前排列組合有四種環境：

• 本地端起sit環境：yarn dev
• 本地端起production環境：yarn dev:prod
• 打包sit環境：yarn build
• 打包production環境：yarn build:prod

 

 

webpack.config.js

通常我們會在 webpack 裡面設定一些環境變數：

module.exports = env => {
  let config = [];
  config.push(
    new webpack.EnvironmentPlugin({
      API_URL: "your-api-domain.com"
    }),
  );
  return config;
}

但這樣 api 路徑是寫死的，我們需要依照環境來打不同的api。

還記得我們剛剛在指令那邊有加上一個參數叫做api，他的值是字串的"SIT"

所以修改程式如下：

module.exports = env => {
  let config = [];
  config.push(
    new webpack.EnvironmentPlugin({
      API_URL: env?.api === "SIT" 
        ? "your-sit-api-domain.com" 
        : "your-production-api-domain.com"
    }),
  );
  return config;
}

最後yarn dev測試一下是不是打到your-sit-api-domain.com這個位置的 api ～

---

備註一下，如果是 vue 專案的話，直接新增.env.development和.env.production檔案，然後在vue.config.js裡面設定就好～