无法使用 html-webpack-plugin 将数据注入模板

Question

我尝试使用此加载程序将自定义数据注入到我们的 .html 模板中，但没有成功。我们已经能够成功地构建我们的资产并注入它们，但是，传递动态数据的能力并没有奏效。查看此 repo 中提供的示例，我看不出 options.title 是如何传递到模板中的。

我正在使用这个入门工具包，这个插件非常简单：https://github.com/AngularClass/NG6-starter

相关依赖的版本如下：

"webpack": "^2.2.1"
"html-webpack-plugin": "^2.29.0"

从webpack.config.js复制相关部分：

module.exports = {
  devtool: 'source-map',
  entry: {
    app: [
      'babel-polyfill',
      path.join(__dirname, 'client', 'app/app.js')
    ]
  },
  module: {
    loaders: [
       { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate-loader!babel-loader' },
       { test: /\.html$/, loader: 'raw-loader' }, // have also tried with the html-loader
       { test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader' },
       { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  },
  plugins: [
    // Injects bundles in your index.html instead of wiring all manually.
    // It also adds hash to all injected assets so we don't have problems
    // with cache purging during deployment.
    new HtmlWebpackPlugin({
      template: 'client/index.html',
      // inject: 'body',
      // hash: true,
      title: 'TEST!!!!!!!!!!!',
      options: {
        title: "TEST!!!!!!!!!!!!!*"
      },
      chunks: ['vendor', 'app']
    }),

    // Automatically move all modules defined outside of application directory to vendor bundle.
    // If you are using more complicated project structure, consider to specify common chunks manually.
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: module => /node_modules/.test(module.resource)
    })
  ]
};

模板文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="NG6-Starter by @AngularClass">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <base href="/">
  </head>
  <body ng-app="app" ng-strict-di ng-cloak>


  <%= htmlWebpackPlugin.options.title %>

  <%= htmlWebpackPlugin.title %>

  <%= title %>

  <%= '\<\%\= htmlWebpackPlugin.title \%\>' %>

  <%= '\<\%\= htmlWebpackPlugin.options \%\>' %>

  </body>
</html>

Answer 1

正确的选项是：

<%= htmlWebpackPlugin.options.title %>

这是EJS语法。它计算表达式并将结果放入 HTML 中。这意味着它需要像这样在 <head> 中：

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

您的模板不起作用的原因是您已将 raw-loader 配置为用于 .html 文件。这意味着模板被视为 HTML 文件。 html-webpack-plugin 后备 ejs 加载器，仅在没有为给定文件配置加载器时使用。为模板使用 .ejs 而不是 .html 是个好主意，以免与加载程序发生冲突。另请参阅 The template option 了解其他解决方案（例如，如果您想使用其他模板引擎）。

将 client/index.html 重命名为 client/index.ejs。

new HtmlWebpackPlugin({
  template: 'client/index.ejs',
  // inject: 'body',
  // hash: true,
  title: 'TEST!!!!!!!!!!!',
  chunks: ['vendor', 'app']
}),

您链接的存储库使用许多东西的旧版本（例如 webpack 和 html-webpack-plugin）并且 html-webpack-plugin 的版本似乎不适用于上述配置。您需要升级它：

npm install --save-dev html-webpack-plugin@latest

Answer 2

所以，问题是 html 或 raw 加载程序正在控制所有 .html 文件，因此 html-webpack-plugin 无法做它需要的。您基本上需要做的是根据需要将 raw 或 html 加载程序指向所有内容，但要排除传递给 html-webpack-plugin.[=19= 的 template 文件]

参考：https://github.com/jantimon/html-webpack-plugin/issues/747#issuecomment-316804313

Answer 3

你可以在没有额外加载器的情况下执行以下操作（至少使用 html-webpack-plugin@3.2.0）：

new HtmlWebpackPlugin({
  template: 'index.html',
  templateParameters: {
    title: 'foo',
    content: 'bar'
  }
})

<!doctype html>
<html lang="en">

<head>
  <title><%= title %></title>
</head>

<body>
  <p><%= content %></p>
</body>

</html>

请注意，这是 EJS 语法，但它也适用于常规 .html 文件。

无法使用 html-webpack-plugin 将数据注入模板

Unable to inject data into template with html-webpack-plugin

webpack

html-webpack-plugin