plugins: [ new HtmlWebpackPlugin({ templateContent: function(templateParams, compilation, callback) { // Return your template content asynchronously here callback(null, '..'); } }) ]
注意,如果同时使用 template 和 templateContent ,插件会抛出错误。
变量 o 在模板中是在渲染时传递进来的数据,这个变量有如下的属性:
1、htmlWebpackPlugin: 这个插件的相关数据 ◦
htmlWebpackPlugin.files: 资源的块名,来自 webpack 的 stats 对象,包含来自 entry 的从 entry point name 到 bundle 文件名映射。
"htmlWebpackPlugin": { "files": { "css": [ "main.css" ], "js": [ "assets/head_bundle.js", "assets/main_bundle.js"], "chunks": { "head": { "entry": "assets/head_bundle.js", "css": [ "main.css" ] }, "main": { "entry": "assets/main_bundle.js", "css": [] }, } } }
如果在 webpack 配置文件中,你配置了 publicPath,将会反射正确的资源
htmlWebpackPlugin.options: 传递给插件的配置。
2、webpack: webpack 的 stats 对象。
3、webpackConfig: webpack 配置信息。
过滤块
可以使用 chunks 来限定特定的块。
plugins: [ new HtmlWebpackPlugin({ chunks: ['app'] }) ]
还可以使用 excludeChunks 来排除特定块。
plugins: [ new HtmlWebpackPlugin({ excludeChunks: ['dev-helper'] }) ]
事件
通过事件允许其它插件来扩展 HTML。
html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit
使用方式:
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) { htmlPluginData.html += 'The magic footer'; callback(); });