如何使用webpack 4在javascript文件中对变量进行模板化

Question

在一个使用Webpack 4构建的项目中，我的一个JavaScript来源看上去像

ReactDOM.render(
    <BrowserRouter basename='/tmsb/dist'>
      <Application />
    </BrowserRouter>,
  document.getElementById('app'));

我想根据某些构建条件（pro / dev）在basename中插入一些值。

我可以在我的HtmlWebpackPlugin中使用index.html来做到这一点，但是javascript文件呢？

我应该为此特定的javascript文件添加一个新的HtmlWebpackPlugin条目，还是有另一种首选的方式？

HtmlWebpackPlugin似乎不行，因为此javascript文件应保留在src/中，而不应复制到某些build文件夹中。

也许我可以为此使用html5 <base>元素（可以从javascript查询其值）？