From b8532f436d4178fb84c8d73d776c070be464f432 Mon Sep 17 00:00:00 2001 From: zzuieliyaoli Date: Mon, 18 Apr 2016 16:46:59 +0800 Subject: [PATCH 1/2] add demo code about events --- README.md | 38 +++++++++++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e321145..7ce700b 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. -Maintainer: Jan Nicklas [@jantimon](https://twitter.com/jantimon) +Maintainer: Jan Nicklas [@jantimon](https://twitter.com/jantimon) Installation ------------ @@ -243,7 +243,7 @@ plugins: [ Events ------ -To allow other plugins to alter the html this plugin executes the following events: +To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the html when this plugin executes the following events: * `html-webpack-plugin-before-html-generation` * `html-webpack-plugin-before-html-processing` @@ -253,9 +253,33 @@ To allow other plugins to alter the html this plugin executes the following even Usage: ```javascript -compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) { - htmlPluginData.html += 'The magic footer'; - callback(null, htmlPluginData); -}); +// MyPlugin.js + +function MyPlugin(options) { + // Configure your plugin with options... +} + +MyPlugin.prototype.apply = function(compiler) { + // ... + compiler.plugin('compilation', function(compilation) { + console.log('The compiler is starting a new compilation...'); + + compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) { + htmlPluginData.html += 'The magic footer'; + callback(null, htmlPluginData); + }); + }); + +}; + +module.exports = MyPlugin; ``` -Note that the callback must be passed the htmlPluginData in order to pass this onto any other plugins listening on the same 'html-webpack-plugin-before-html-processing' event. +Then in `webpack.config.js` + +```javascript +plugins: [ + new MyPlugin({options: ''}) +] +``` + +Note that the callback must be passed the htmlPluginData in order to pass this onto any other plugins listening on the same 'html-webpack-plugin-before-html-processing' event. From 72c33d7b3e334091cbad4c32f06ef044bff6fdbe Mon Sep 17 00:00:00 2001 From: zzuieliyaoli Date: Mon, 18 Apr 2016 19:40:54 +0800 Subject: [PATCH 2/2] remove additional word --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7ce700b..9417693 100644 --- a/README.md +++ b/README.md @@ -243,7 +243,7 @@ plugins: [ Events ------ -To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the html when this plugin executes the following events: +To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the html this plugin executes the following events: * `html-webpack-plugin-before-html-generation` * `html-webpack-plugin-before-html-processing`