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

Posted 2021-05-06

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

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

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

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

答案

仅仅构建一次所有内容并在每个环境中都使用相同的代码并不是最好的主意，但如果这是必须的话......

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，这在生产中的开发和虚假。

编辑：因为我们真的不知道你的意思100％。如果您不想重建，只需要在每个环境中更改变量。

他是值得的。

每个环境中的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;
});