如何设置Webpack以在开发或生产环境中更改特定的配置文件？

Question

我有两个文件，config_local.js和config_prod.js。

你如何将变量传递给webpack，从而生成一个名为config_api.js的新文件，该文件可以从local或production文件中生成。

config_local.js

"api": {
  "login": "http://localhost/app/api/login/",
  "users": "http://localhost/app/api/users/"
}

config_prod.js

"api": {
  "login": "/app/api/login/",
  "users": "/app/api/users/"
}

然后，在我的services/api.js文件中

import axios from 'axios'

export const userLogin = (username, password) => {
    const post_data = { username, password };
    return axios.post('http://localhost/app/api/login', post_data)
        .then(res => res);
};

我可以这样做：

我可以像下面这样做：

import axios from 'axios'
import api from 'config_api' 

export const userLogin = (username, password) => {
    const post_data = { username, password };
    return axios.post(api.login, post_data)  // <--
        .then(res => res);
};

- Leon Gaban

---

你可以使用环境变量 - undefined

Answer 1

在 package.json 中，您可以使用脚本，甚至在命令行中可以使用环境变量。

 "scripts": {
    "dev": "NODE_ENV=development webpack",
    "production": "NODE_ENV=production webpack",
    "watch": "npm run dev -- --watch"
  },

在webpack.config.js文件中，您可以使用以下代码：

const inProduction = process.env.NODE_ENV === 'production';
const inDevelopment = process.env.NODE_ENV === "development";


if(inProduction) 
//do this
if(inDevelopment)
//do that

webpack默认查找webpack.config.js文件，但是如果需要自定义配置，可以使用webpack --config config_local.js

- owais

---

谢谢！我还想添加这个链接，因为这是我一直努力寻找的最终解决方案。https://stackoverflow.com/questions/44371162/how-to-create-generate-export-a-file-from-my-webpack-2-config-to-be-used-inside - undefined