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加载点，但要排除传递给template的{{1}}文件。

参考：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

3 个答案: