替换webpack包中的变量，而不会破坏源映射，也无需重建

Question

我的javascript代码（与webpack捆绑在一起）中有一些变量需要根据环境进行替换：

const AUTHENTICATE_URL = '{{conf.authenticate_url}}'

如何在不为每个环境重新运行构建的情况下执行此操作（运行构建太慢）。我的html中没有第二个标签，我只需要一个包含捆绑软件的标签即可。

目前，我只是使用模板处理器替换那些变量，但这破坏了源映射，这意味着我可以替换我本不想替换的东西。

Answer 1

只一次构建所有内容并在每个环境中粘贴相同的代码实际上不是最好的主意，但是如果那样的话，那么它就必须...

Webpack Define plugin

webpack

new webpack.DefinePlugin({
  'SERVICE_URL_DEV': JSON.stringify('http://dev.example.com'),
  'SERVICE_URL': JSON.stringify('http://example.com')
});

JS

if (DEV_ENVIRONMENT) {
  console.log(SERVICE_URL_DEV);
} else {
  console.log(SERVICE_URL);
}

我在这里假设您可以通过某种方式告诉差异您所处的环境，并且我推测您通过URL或窗口中的某些内容确定了代码中的常量，这被称为DEV_ENVIRONMENT在开发人员中为true，在生产人员中为false。

编辑：由于我们并不真正了解您的意思是100％。如果您永远不需要重建，只需要在每个环境中随时更改变量即可。

使用axios。

每个环境中的

variable.json文件，每个环境中都有不同的URL

{authUrl: 'https://dev.example.com'}

应用程序中的JS文件

let AUTHENTICATE_URL;
axios.get('https://yoururl.com/path/to/variable.json').then((response) => {
  AUTHENTICATE_URL = response.data.authUrl;
});