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

Question

在使用 Webpack 4 构建的项目中，我的 JavaScript 源代码之一如下所示

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

我想插入basename某些值取决于某些构建条件(pro/dev)。

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

我应该添加一个新的 HtmlWebpackPlugin此特定 javascript 文件的条目，或者还有其他首选方法吗？

看来这不是 HtmlWebpackPlugin 的工作因为这个 javascript 文件应该保留在 src/ 中并且没有复制到某些build文件夹。

也许我可以使用 html5 <base>该元素(任何来自 javascript 的查询其值)？

Answer 1

使用 webpack DefinePlugin 设法将变量传递到 React javascript

      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify(devMode()),
          'BASENAME': JSON.stringify(baseName())
        }
      }),

允许在 javascript 中引用 'baseName' 作为

ReactDOM.render(
    <BrowserRouter basename={process.env.BASENAME}>
      <Application />
    </BrowserRouter>,
  document.getElementById('app'));

有人可能会写 '"myvalue"' 而不是 JSON.stringify 而不是 JSON.stringify('myvalue')。