Question

我需要在模板中添加随机变量。它是一个使用HtmlWebpackPlugin的弹出Angular项目。我的HtmlWebpackPlugin配置如下所示：

new HtmlWebpackPlugin({
  "filename": "./index.html",
  "hash": false,
  "inject": false,
  "compile": true,
  "favicon": false,
  "minify": false,
  "template": "./src/index.html",
  "cache": true,
  "showErrors": true,
  "chunks": "all",
  "excludeChunks": [],
  "myHash": Math.random().toString(36).slice(2),
  "xhtml": true,
  "chunksSortMode": function sort(left, right) {
    let leftIndex = entryPoints.indexOf(left.names[0]);
    let rightindex = entryPoints.indexOf(right.names[0]);
    if (leftIndex > rightindex) {
      return 1;
    }
    else if (leftIndex < rightindex) {
      return -1;
    }
    else {
      return 0;
    }
  }
})

myHash是我需要添加到模板的变量。

出于某种原因，这不起作用：

<p><%= htmlWebpackPlugin.options.myHash %></p>

生成的Html看起来像： <p><%= htmlWebpackPlugin.options.myHash %></p>

Answer 1

当我在webpack 1中有非常相似（推断<%=htmlWebpackPlugin.files.webpackManifest%>）问题时，我通过从html-loader中排除html文件来解决它：

{
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: minifyHtmlOpts
                }],
                // excluding, so ejs loader will be used for these pages
                exclude: /index.html/
            }

它仍适用于webpack 3。

HtmlWebpackPlugin无法解析模板中的自定义变量

1 个答案: