Question

我正在尝试替换HTML中的标题和版本号。我想让变量得到替换。最终输出仍包含变量名称。

我的webpack配置包含：

const HtmlWebpackPluginConfig = {
  template: path.join(__dirname, '/client/index.html'),
  inject: 'body',
  commitHash: 'hello',
  filename: '/index.html',
  title: 'My App'
};

我的index.html是：

<!DOCTYPE html>
<html>
  <head>
    <title>{%= htmlWebpackPlugin.options.title %}</title>
    <meta charset="UTF-8"/>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="manifest" href="/manifest.json">
    <meta name="version" content="{%= htmlWebpackPlugin.options.commitHash %}">

  </head>
  <body>
    <div id="react-view" ></div>
  </body>
</html>

最终输出与index.html文件几乎相同（填充了react元素）。

我做错了什么？如何获取要替换的变量？

Answer 1

问题在于我使用花括号而不是尖括号。

我应该写

<title><%= htmlWebpackPlugin.options.title %></title>

如何用HtmlWebpackPlugin和Webpack替换变量？

1 个答案: