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; }); };