plugin的具体使用(2)

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/pxyds.html