使用Webpack在运行时提供的变量无法更新的问题求助

Webpack的DefinePlugin是编译时文本替换工具，不是运行时注入可修改变量的工具。你当前的配置会在编译阶段把代码里的backgroundVariables直接替换成JSON.stringify(backgroundVariables)生成的字符串字面量（比如{"key":"value"}），而字面量对象属于常量，无法修改其属性，所以会触发赋值报错。

修改DefinePlugin的配置，将字面量对象赋值给一个可修改的变量：

1. 调整Webpack配置：

plugins: [
  new webpack.DefinePlugin({
    // 用特殊前缀避免全局变量冲突
    __BACKGROUND_VARS__: JSON.stringify(backgroundVariables),
  }),
]

2. 在业务JS文件中，先把编译替换后的字面量赋值给本地变量，再修改属性：

const backgroundVariables = __BACKGROUND_VARS__;
console.log('background variables', backgroundVariables);
backgroundVariables.captureLogs = true; // 现在可以正常修改

你也可以直接在入口文件中导入backgroundVariables变量，跳过DefinePlugin，这样变量本身就是可修改的，操作更直观。

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