如何设置Webpack来更改开发或生产的特定配置文件？

Question

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

如何将变量传递到webpack中，基本上从本地或生产 config_api.js 的新文件>一。

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);
};

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会查找weback.config.js但是您可以使用自定义配置 webpack --config config_local.js