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

Question

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

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

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

目前，我只是使用模板处理器替换这些变量，但这破坏了源映射，并意味着我可以潜在地替换我不打算替换的内容。

Answer 1

只构建一次所有内容并在每个环境中粘贴相同的代码真的不是最好的主意，但如果这是必须的方式......

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 这在 dev 中是正确的，在 prod 中是错误的。

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

使用公理。

每个环境中

的变量.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;
});