Skip to content

Commit

Permalink
refactor: Changed hook names and arguments - the hook order is 'befor…
Browse files Browse the repository at this point in the history
…eAssetTagGeneration', 'alterAssetTags', 'alterAssetTagGroups', 'afterTemplateExecution', 'beforeEmit', 'afterEmit'

BREAKING CHANGE: Renamed beforeHtmlGeneration hook to beforeAssetTagGeneration
BREAKING CHANGE: Renamed beforeHtmlProcessing hook to alterAssetTags
BREAKING CHANGE: Renamed afterHtmlProcessing hook to beforeEmit
  • Loading branch information
jantimon committed Aug 27, 2018
1 parent ae8233a commit 14b4456
Show file tree
Hide file tree
Showing 8 changed files with 583 additions and 244 deletions.
115 changes: 90 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -293,36 +293,101 @@ To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter
The [lib/hooks.js](https://github.com/jantimon/html-webpack-plugin/blob/master/lib/hooks.js) contains all information
about which values are passed.

You can tap into the following async hooks:
[![Concept flow uml](https://raw.githubusercontent.com/jantimon/html-webpack-plugin/master/flow.png)](https://github.com/jantimon/html-webpack-plugin/blob/master/flow.puml)

* `beforeHtmlGeneration`
* `beforeHtmlProcessing`
* `alterAssetTags`
* `afterHtmlProcessing`
* `afterEmit`
#### `beforeAssetTagGeneration` hook

Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
```
AsyncSeriesWaterfallHook<{
assets: {
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
favicon?: string | undefined,
manifest?: string | undefined
},
outputName: string,
plugin: HtmlWebpackPlugin
}>
```

**plugin.js**
```js
function MyPlugin(options) {
// Configure your plugin with options...
}
#### `alterAssetTags` hook

```
AsyncSeriesWaterfallHook<{
assetTags: {
scripts: Array<HtmlTagObject>,
styles: Array<HtmlTagObject>,
meta: Array<HtmlTagObject>,
},
outputName: string,
plugin: HtmlWebpackPlugin
}>
```

MyPlugin.prototype.apply = function (compiler) {
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
console.log('The compiler is starting a new compilation...');
#### `alterAssetTagGroups` hook

// | HOOK NAME |
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync(
'MyPlugin', // <-- Set a meaningful name here for stacktraces
(data, cb) => {
data.html += 'The Magic Footer'
```
AsyncSeriesWaterfallHook<{
headTags: Array<HtmlTagObject | HtmlTagObject>,
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
outputName: string,
plugin: HtmlWebpackPlugin
}>
```

cb(null, data)
}
)
})
#### `afterTemplateExecution` hook

```
AsyncSeriesWaterfallHook<{
html: string,
headTags: Array<HtmlTagObject | HtmlTagObject>,
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
outputName: string,
plugin: HtmlWebpackPlugin,
}>
```

#### `beforeEmit` hook

```
AsyncSeriesWaterfallHook<{
html: string,
outputName: string,
plugin: HtmlWebpackPlugin,
}>
```

#### `afterEmit` hook

```
AsyncSeriesWaterfallHook<{
outputName: string,
plugin: HtmlWebpackPlugin
}>
```

Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)

**plugin.js**
```js
class MyPlugin {
apply (compiler) {
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
console.log('The compiler is starting a new compilation...')

// Staic Plugin interface |compilation |HOOK NAME | register listener
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
'MyPlugin', // <-- Set a meaningful name here for stacktraces
(data, cb) => {
// Manipulate the content
data.html += 'The Magic Footer'
// Tell webpack to move on
cb(null, data)
}
)
})
}
}

module.exports = MyPlugin
Expand All @@ -335,7 +400,7 @@ plugins: [
]
```

Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `html-webpack-plugin-before-html-processing` event
Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `beforeEmit` event

<h2 align="center">Maintainers</h2>

Expand Down
Binary file added flow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions flow.puml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@startuml
' See docs http://plantuml.com/sequence.html
'
' generate png:
' npm run puml
autonumber

participant Webpack
participant ChildCompiler
participant TagCreator
participant TemplateExecutor
participant TagInjector

Webpack -> ChildCompiler : start child compilation
ChildCompiler -> ChildCompiler : compile html template
ChildCompiler -> TemplateExecutor : handover compiled template
Webpack -> TagCreator : hand over compilation\n assets
note right of TagInjector: beforeAssetTagGeneration
TagCreator -> TagCreator : create script style\n and meta tags
note right of TagInjector: alterAssetTags
TagCreator -> TagCreator : group tags to\n head and body groups
note right of TagInjector: alterAssetTagGroups
TagCreator -> TemplateExecutor : handover tag groups
TemplateExecutor -> TemplateExecutor : execute compiled template
note right of TagInjector: afterTemplateExecution
TemplateExecutor -> TagInjector : handover html
TagInjector -> TagInjector : inject script style\n and meta tags
note right of TagInjector: beforeEmit
TagInjector -> Webpack : add generated file to\n assets
note right of TagInjector: afterEmit

@enduml
Loading

0 comments on commit 14b4456

Please sign in to comment.