JHipster：如何为生产环境Webpack配置覆盖SERVER_API_URL

我碰到过一模一样的问题，大概率是webpack-merge的合并逻辑或者插件处理方式没搞对，咱们一步步来解决：

1. 先检查webpack-merge的调用顺序 #

你得确保在webpack-prod.js里是先合并common配置，再叠加prod配置，顺序绝对不能搞反。正确的写法应该是这样：

const merge = require('webpack-merge');
const commonConfig = require('./webpack-common');

const prodConfig = {
  // 你的生产环境专属配置
};

// 重点：common在前，prod在后，prod的配置会覆盖/追加到common上
module.exports = merge(commonConfig, prodConfig);

如果写反成merge(prodConfig, commonConfig)，那common里的DefinePlugin会在prod之后执行，直接把你设置的API地址又覆盖回空值了。

2. 不要新增DefinePlugin，直接替换已有实例 #

如果common里已经有一个DefinePlugin，你再在prod里加一个新的，会导致两个插件都执行（顺序取决于merge后的数组）。更稳妥的方式是直接替换common里的那个：

const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack-common');

const prodConfig = merge(commonConfig, {
  // 其他生产环境配置
});

// 遍历plugins数组，找到DefinePlugin并替换它的配置
prodConfig.plugins = prodConfig.plugins.map(plugin => {
  if (plugin instanceof webpack.DefinePlugin) {
    return new webpack.DefinePlugin({
      'process.env': {
        // 保留common里可能有的其他环境变量（比如NODE_ENV），只覆盖SERVER_API_URL
        ...plugin.definitions['process.env'],
        SERVER_API_URL: JSON.stringify('http://172.26.0.150:9000/')
      }
    });
  }
  return plugin;
});

module.exports = prodConfig;

这种方式既不会丢失common里DefinePlugin的其他配置，又能精准覆盖SERVER_API_URL的值。

3. 验证构建后的实际值 #

如果还是没生效，你可以直接去打包后的文件里搜SERVER_API_URL，看看它的实际取值是什么。比如打开打包后的main.js，搜索process.env.SERVER_API_URL，这样能快速定位是配置没生效，还是代码里有其他地方覆盖了这个变量。

另外提一句，用JSON.stringify()处理字符串值比手动套双引号更规范，能避免引号嵌套的坑。

内容的提问来源于stack exchange，提问作者user9241912