html-webpack-plugin在html中插入数据

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8"/>

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

  </head>

  <body>

  </body>

</html>

查看文档，有如下介绍：
可以使用lodash语法在模板中注入数据。
下面的变量在模板中可以使用：

htmlWebpackPlugin.options: 通过new htmlWebpackPlugin(options)传递.
webpack: 通过compilation.getStats().toJson()得到的一个对象.
webpackConfig对象: 比如 webpackConfig.output.publicPath获取webpack.prod.conf.js中的publicPath
compilation对象.
htmlWebpackPlugin.files: 格式如下

"htmlWebpackPlugin": {

  "files": {

    "css": [ "main.css" ],

    "js": [ "https://www.baidu.com/static/js/app.cfebce17280ae88b6b7b.js"],

    "chunks": {}

  }

}

如何实现的呢？
主要在emit阶段，通过如下方法实现(/node_modules/html-webpack-plugin/index.js)：

HtmlWebpackPlugin.prototype.executeTemplate

= function (templateFunction, chunks, assets, compilation) {

  var self = this;

  return Promise.resolve()

    // Template processing

    .then(function () {

      var templateParams = {

        compilation: compilation,

        webpack: compilation.getStats().toJson(),

        webpackConfig: compilation.options,

        htmlWebpackPlugin: {

          files: assets,

          options: self.options

        }

      };

      var html = '';

      try {

        html = templateFunction(templateParams);// 注入到模板方法中

      } catch (e) {...}

      return html;

    });

};