Skip to content

Commit 14b4456

Browse files
jantimonjantimon
committedAug 27, 2018
refactor: Changed hook names and arguments - the hook order is 'beforeAssetTagGeneration', '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
·
v5.6.3v4.0.0
1 parent ae8233a commit 14b4456

File tree

8 files changed

+583
-244
lines changed

8 files changed

+583
-244
lines changed
 

‎README.md

+90-25
Original file line numberDiff line numberDiff line change
@@ -293,36 +293,101 @@ To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter
293293
The [lib/hooks.js](https://github.com/jantimon/html-webpack-plugin/blob/master/lib/hooks.js) contains all information
294294
about which values are passed.
295295

296-
You can tap into the following async hooks:
296+
[![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)
297297

298-
* `beforeHtmlGeneration`
299-
* `beforeHtmlProcessing`
300-
* `alterAssetTags`
301-
* `afterHtmlProcessing`
302-
* `afterEmit`
298+
#### `beforeAssetTagGeneration` hook
303299

304-
Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
300+
```
301+
AsyncSeriesWaterfallHook<{
302+
assets: {
303+
publicPath: string,
304+
js: Array<{entryName: string, path: string}>,
305+
css: Array<{entryName: string, path: string}>,
306+
favicon?: string | undefined,
307+
manifest?: string | undefined
308+
},
309+
outputName: string,
310+
plugin: HtmlWebpackPlugin
311+
}>
312+
```
305313

306-
**plugin.js**
307-
```js
308-
function MyPlugin(options) {
309-
// Configure your plugin with options...
310-
}
314+
#### `alterAssetTags` hook
315+
316+
```
317+
AsyncSeriesWaterfallHook<{
318+
assetTags: {
319+
scripts: Array<HtmlTagObject>,
320+
styles: Array<HtmlTagObject>,
321+
meta: Array<HtmlTagObject>,
322+
},
323+
outputName: string,
324+
plugin: HtmlWebpackPlugin
325+
}>
326+
```
311327

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

316-
// | HOOK NAME |
317-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync(
318-
'MyPlugin', // <-- Set a meaningful name here for stacktraces
319-
(data, cb) => {
320-
data.html += 'The Magic Footer'
330+
```
331+
AsyncSeriesWaterfallHook<{
332+
headTags: Array<HtmlTagObject | HtmlTagObject>,
333+
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
334+
outputName: string,
335+
plugin: HtmlWebpackPlugin
336+
}>
337+
```
321338

322-
cb(null, data)
323-
}
324-
)
325-
})
339+
#### `afterTemplateExecution` hook
340+
341+
```
342+
AsyncSeriesWaterfallHook<{
343+
html: string,
344+
headTags: Array<HtmlTagObject | HtmlTagObject>,
345+
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
346+
outputName: string,
347+
plugin: HtmlWebpackPlugin,
348+
}>
349+
```
350+
351+
#### `beforeEmit` hook
352+
353+
```
354+
AsyncSeriesWaterfallHook<{
355+
html: string,
356+
outputName: string,
357+
plugin: HtmlWebpackPlugin,
358+
}>
359+
```
360+
361+
#### `afterEmit` hook
362+
363+
```
364+
AsyncSeriesWaterfallHook<{
365+
outputName: string,
366+
plugin: HtmlWebpackPlugin
367+
}>
368+
```
369+
370+
Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
371+
372+
**plugin.js**
373+
```js
374+
class MyPlugin {
375+
apply (compiler) {
376+
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
377+
console.log('The compiler is starting a new compilation...')
378+
379+
// Staic Plugin interface |compilation |HOOK NAME | register listener
380+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
381+
'MyPlugin', // <-- Set a meaningful name here for stacktraces
382+
(data, cb) => {
383+
// Manipulate the content
384+
data.html += 'The Magic Footer'
385+
// Tell webpack to move on
386+
cb(null, data)
387+
}
388+
)
389+
})
390+
}
326391
}
327392

328393
module.exports = MyPlugin
@@ -335,7 +400,7 @@ plugins: [
335400
]
336401
```
337402

338-
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
403+
Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `beforeEmit` event
339404

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

‎flow.png

46 KB
Loading

‎flow.puml

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@startuml
2+
' See docs http://plantuml.com/sequence.html
3+
'
4+
' generate png:
5+
' npm run puml
6+
autonumber
7+
8+
participant Webpack
9+
participant ChildCompiler
10+
participant TagCreator
11+
participant TemplateExecutor
12+
participant TagInjector
13+
14+
Webpack -> ChildCompiler : start child compilation
15+
ChildCompiler -> ChildCompiler : compile html template
16+
ChildCompiler -> TemplateExecutor : handover compiled template
17+
Webpack -> TagCreator : hand over compilation\n assets
18+
note right of TagInjector: beforeAssetTagGeneration
19+
TagCreator -> TagCreator : create script style\n and meta tags
20+
note right of TagInjector: alterAssetTags
21+
TagCreator -> TagCreator : group tags to\n head and body groups
22+
note right of TagInjector: alterAssetTagGroups
23+
TagCreator -> TemplateExecutor : handover tag groups
24+
TemplateExecutor -> TemplateExecutor : execute compiled template
25+
note right of TagInjector: afterTemplateExecution
26+
TemplateExecutor -> TagInjector : handover html
27+
TagInjector -> TagInjector : inject script style\n and meta tags
28+
note right of TagInjector: beforeEmit
29+
TagInjector -> Webpack : add generated file to\n assets
30+
note right of TagInjector: afterEmit
31+
32+
@enduml

‎index.js

+336-164
Large diffs are not rendered by default.

‎lib/hooks.js

+27-22
Original file line numberDiff line numberDiff line change
@@ -16,52 +16,56 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
1616
// to allow easier access when using ts-check or typescript inside plugins
1717
/** @typedef {{
1818
19-
beforeHtmlGeneration:
19+
beforeAssetTagGeneration:
2020
AsyncSeriesWaterfallHook<{
2121
assets: {
2222
publicPath: string,
2323
js: Array<{entryName: string, path: string}>,
2424
css: Array<{entryName: string, path: string}>,
25+
favicon?: string | undefined,
26+
manifest?: string | undefined
2527
},
2628
outputName: string,
2729
plugin: HtmlWebpackPlugin
2830
}>,
2931
30-
beforeHtmlProcessing:
32+
alterAssetTags:
3133
AsyncSeriesWaterfallHook<{
32-
html: string,
33-
assets: {
34-
publicPath: string,
35-
js: Array<{entryName: string, path: string}>,
36-
css: Array<{entryName: string, path: string}>,
34+
assetTags: {
35+
scripts: Array<HtmlTagObject>,
36+
styles: Array<HtmlTagObject>,
37+
meta: Array<HtmlTagObject>,
3738
},
3839
outputName: string,
39-
plugin: HtmlWebpackPlugin,
40+
plugin: HtmlWebpackPlugin
4041
}>,
4142
42-
afterHtmlProcessing:
43+
alterAssetTagGroups:
44+
AsyncSeriesWaterfallHook<{
45+
headTags: Array<HtmlTagObject | HtmlTagObject>,
46+
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
47+
outputName: string,
48+
plugin: HtmlWebpackPlugin
49+
}>,
50+
51+
afterTemplateExecution:
4352
AsyncSeriesWaterfallHook<{
4453
html: string,
45-
assets: {
46-
publicPath: string,
47-
js: Array<{entryName: string, path: string}>,
48-
css: Array<{entryName: string, path: string}>,
49-
},
54+
headTags: Array<HtmlTagObject | HtmlTagObject>,
55+
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
5056
outputName: string,
5157
plugin: HtmlWebpackPlugin,
5258
}>,
5359
54-
alterAssetTags:
60+
beforeEmit:
5561
AsyncSeriesWaterfallHook<{
56-
head: Array<HtmlTagObject>,
57-
body: Array<HtmlTagObject>,
62+
html: string,
5863
outputName: string,
59-
plugin: HtmlWebpackPlugin
64+
plugin: HtmlWebpackPlugin,
6065
}>,
6166
6267
afterEmit:
6368
AsyncSeriesWaterfallHook<{
64-
html: string,
6569
outputName: string,
6670
plugin: HtmlWebpackPlugin
6771
}>,
@@ -98,10 +102,11 @@ function getHtmlWebpackPluginHooks (compilation) {
98102
*/
99103
function createHtmlWebpackPluginHooks () {
100104
return {
101-
beforeHtmlGeneration: new AsyncSeriesWaterfallHook(['pluginArgs']),
102-
beforeHtmlProcessing: new AsyncSeriesWaterfallHook(['pluginArgs']),
105+
beforeAssetTagGeneration: new AsyncSeriesWaterfallHook(['pluginArgs']),
103106
alterAssetTags: new AsyncSeriesWaterfallHook(['pluginArgs']),
104-
afterHtmlProcessing: new AsyncSeriesWaterfallHook(['pluginArgs']),
107+
alterAssetTagGroups: new AsyncSeriesWaterfallHook(['pluginArgs']),
108+
afterTemplateExecution: new AsyncSeriesWaterfallHook(['pluginArgs']),
109+
beforeEmit: new AsyncSeriesWaterfallHook(['pluginArgs']),
105110
afterEmit: new AsyncSeriesWaterfallHook(['pluginArgs'])
106111
};
107112
}

‎package.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "html-webpack-plugin",
3-
"version": "4.0.0-alpha",
3+
"version": "4.0.0-beta",
44
"license": "MIT",
55
"description": "Simplifies creation of HTML files to serve your webpack bundles",
66
"author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
@@ -17,6 +17,7 @@
1717
"build-examples": "node examples/build-examples.js",
1818
"test": "jest --runInBand --verbose --coverage",
1919
"test-watch": "jest --runInBand --watch",
20+
"puml": "npx puml generate flow.puml -o flow.png",
2021
"release": "standard-version"
2122
},
2223
"semistandard": {
@@ -25,6 +26,7 @@
2526
]
2627
},
2728
"devDependencies": {
29+
"@types/loader-utils": "1.1.3",
2830
"@types/node": "10.1.1",
2931
"appcache-webpack-plugin": "^1.3.0",
3032
"commitizen": "2.9.6",
@@ -34,9 +36,9 @@
3436
"extract-text-webpack-plugin": "^4.0.0-beta.0",
3537
"file-loader": "^0.9.0",
3638
"html-loader": "^0.4.4",
39+
"jest": "23.3.0",
3740
"pug": "2.0.3",
3841
"pug-loader": "2.4.0",
39-
"jest": "23.3.0",
4042
"rimraf": "^2.5.4",
4143
"semistandard": "8.0.0",
4244
"standard-version": "^4.3.0",
@@ -78,7 +80,9 @@
7880
}
7981
},
8082
"jest": {
81-
"watchPathIgnorePatterns": ["<rootDir>/dist"],
83+
"watchPathIgnorePatterns": [
84+
"<rootDir>/dist"
85+
],
8286
"testEnvironment": "node"
8387
}
8488
}

‎spec/basic.spec.js

+66-29
Original file line numberDiff line numberDiff line change
@@ -782,8 +782,7 @@ describe('HtmlWebpackPlugin', () => {
782782
apply: function (compiler) {
783783
compiler.plugin('compilation', compilation => {
784784
HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
785-
expect(typeof object.body).toBe('object');
786-
expect(typeof object.head).toBe('object');
785+
expect(Object.keys(object.assetTags)).toEqual(['scripts', 'styles', 'meta']);
787786
eventFired = true;
788787
callback();
789788
});
@@ -817,9 +816,9 @@ describe('HtmlWebpackPlugin', () => {
817816
apply: function (compiler) {
818817
compiler.plugin('compilation', compilation => {
819818
HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('HtmlWebpackPluginTest', (pluginArgs, callback) => {
820-
pluginArgs.body = pluginArgs.body.map(tag => {
819+
pluginArgs.assetTags.scripts = pluginArgs.assetTags.scripts.map(tag => {
821820
if (tag.tagName === 'script') {
822-
tag.attributes.async = true;
821+
tag.attributes.specialAttribute = true;
823822
}
824823
return tag;
825824
});
@@ -842,7 +841,7 @@ describe('HtmlWebpackPlugin', () => {
842841
examplePlugin
843842
]
844843
},
845-
[/<body>[\s]*<script src="app_bundle.js" async><\/script>[\s]*<\/body>/],
844+
[/<body>[\s]*<script src="app_bundle.js" specialAttribute><\/script>[\s]*<\/body>/],
846845
null, done, false, false);
847846
});
848847

@@ -851,7 +850,7 @@ describe('HtmlWebpackPlugin', () => {
851850
apply: function (compiler) {
852851
compiler.plugin('compilation', compilation => {
853852
HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('HtmlWebpackPluginTest', (pluginArgs, callback) => {
854-
pluginArgs.body = pluginArgs.body.map(tag => {
853+
pluginArgs.assetTags.scripts = pluginArgs.assetTags.scripts.map(tag => {
855854
if (tag.tagName === 'script') {
856855
tag.attributes.async = false;
857856
}
@@ -880,12 +879,12 @@ describe('HtmlWebpackPlugin', () => {
880879
null, done, false, false);
881880
});
882881

883-
it('fires the html-webpack-plugin-before-html-processing event', done => {
882+
it('fires the html-webpack-plugin-after-template-execution event', done => {
884883
let eventFired = false;
885884
const examplePlugin = {
886885
apply: function (compiler) {
887886
compiler.plugin('compilation', compilation => {
888-
HtmlWebpackPlugin.getHooks(compilation).beforeHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
887+
HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
889888
eventFired = true;
890889
callback();
891890
});
@@ -914,12 +913,12 @@ describe('HtmlWebpackPlugin', () => {
914913
shouldExpectWarnings);
915914
});
916915

917-
it('fires the html-webpack-plugin-after-html-processing event', done => {
916+
it('fires the html-webpack-plugin-before-emit event', done => {
918917
let eventFired = false;
919918
const examplePlugin = {
920919
apply: function (compiler) {
921920
compiler.plugin('compilation', compilation => {
922-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
921+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
923922
eventFired = true;
924923
callback();
925924
});
@@ -978,12 +977,12 @@ describe('HtmlWebpackPlugin', () => {
978977
});
979978
});
980979

981-
it('allows to modify the html during html-webpack-plugin-after-html-processing event', done => {
980+
it('allows to modify the html during html-webpack-plugin-before-emit event', done => {
982981
let eventFired = false;
983982
const examplePlugin = {
984983
apply: function (compiler) {
985984
compiler.plugin('compilation', compilation => {
986-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
985+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
987986
eventFired = true;
988987
object.html += 'Injected by plugin';
989988
callback();
@@ -1013,13 +1012,50 @@ describe('HtmlWebpackPlugin', () => {
10131012
shouldExpectWarnings);
10141013
});
10151014

1016-
it('allows to modify sequentially the html during html-webpack-plugin-after-html-processing event by edit the given arguments object', done => {
1015+
it('allows to access all hooks from within a plugin', done => {
1016+
let hookNames;
1017+
const examplePlugin = {
1018+
apply: function (compiler) {
1019+
compiler.plugin('compilation', compilation => {
1020+
hookNames = Object.keys(HtmlWebpackPlugin.getHooks(compilation)).sort();
1021+
});
1022+
}
1023+
};
1024+
1025+
const shouldExpectWarnings = webpackMajorVersion < 4;
1026+
testHtmlPlugin({
1027+
mode: 'production',
1028+
entry: {
1029+
app: path.join(__dirname, 'fixtures/index.js')
1030+
},
1031+
output: {
1032+
path: OUTPUT_DIR,
1033+
filename: '[name]_bundle.js'
1034+
},
1035+
plugins: [
1036+
new HtmlWebpackPlugin(),
1037+
examplePlugin
1038+
]
1039+
}, [], null, () => {
1040+
expect(hookNames).toEqual([
1041+
'afterEmit',
1042+
'afterTemplateExecution',
1043+
'alterAssetTagGroups',
1044+
'alterAssetTags',
1045+
'beforeAssetTagGeneration',
1046+
'beforeEmit']);
1047+
done();
1048+
}, false,
1049+
shouldExpectWarnings);
1050+
});
1051+
1052+
it('allows to modify sequentially the html during html-webpack-plugin-before-emit event by edit the given arguments object', done => {
10171053
let eventFiredForFirstPlugin = false;
10181054
let eventFiredForSecondPlugin = false;
10191055
const examplePlugin = {
10201056
apply: function (compiler) {
10211057
compiler.plugin('compilation', compilation => {
1022-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1058+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
10231059
eventFiredForFirstPlugin = true;
10241060
object.html += 'Injected by first plugin';
10251061
callback(null, object);
@@ -1030,7 +1066,7 @@ describe('HtmlWebpackPlugin', () => {
10301066
const secondExamplePlugin = {
10311067
apply: function (compiler) {
10321068
compiler.plugin('compilation', compilation => {
1033-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1069+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
10341070
eventFiredForSecondPlugin = true;
10351071
object.html += ' Injected by second plugin';
10361072
callback(null);
@@ -1062,13 +1098,13 @@ describe('HtmlWebpackPlugin', () => {
10621098
shouldExpectWarnings);
10631099
});
10641100

1065-
it('allows to modify sequentially the html during html-webpack-plugin-after-html-processing event either by edit the given arguments object or by return a new object in the callback', done => {
1101+
it('allows to modify sequentially the html during html-webpack-plugin-before-emit event either by edit the given arguments object or by return a new object in the callback', done => {
10661102
let eventFiredForFirstPlugin = false;
10671103
let eventFiredForSecondPlugin = false;
10681104
const examplePlugin = {
10691105
apply: function (compiler) {
10701106
compiler.plugin('compilation', compilation => {
1071-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1107+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
10721108
eventFiredForFirstPlugin = true;
10731109
const result = _.extend(object, {
10741110
html: object.html + 'Injected by first plugin'
@@ -1081,7 +1117,7 @@ describe('HtmlWebpackPlugin', () => {
10811117
const secondExamplePlugin = {
10821118
apply: function (compiler) {
10831119
compiler.plugin('compilation', compilation => {
1084-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1120+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
10851121
eventFiredForSecondPlugin = true;
10861122
object.html += ' Injected by second plugin';
10871123
callback(null);
@@ -1113,13 +1149,13 @@ describe('HtmlWebpackPlugin', () => {
11131149
shouldExpectWarnings);
11141150
});
11151151

1116-
it('allows to modify sequentially the html during html-webpack-plugin-after-html-processing event by return a new object in the callback', done => {
1152+
it('allows to modify sequentially the html during html-webpack-plugin-before-emit event by return a new object in the callback', done => {
11171153
let eventFiredForFirstPlugin = false;
11181154
let eventFiredForSecondPlugin = false;
11191155
const examplePlugin = {
11201156
apply: function (compiler) {
11211157
compiler.plugin('compilation', compilation => {
1122-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1158+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
11231159
eventFiredForFirstPlugin = true;
11241160
const result = _.extend(object, {
11251161
html: object.html + 'Injected by first plugin'
@@ -1132,7 +1168,7 @@ describe('HtmlWebpackPlugin', () => {
11321168
const secondExamplePlugin = {
11331169
apply: function (compiler) {
11341170
compiler.plugin('compilation', compilation => {
1135-
HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1171+
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
11361172
eventFiredForSecondPlugin = true;
11371173
const result = _.extend(object, {
11381174
html: object.html + ' Injected by second plugin'
@@ -1164,14 +1200,14 @@ describe('HtmlWebpackPlugin', () => {
11641200
});
11651201
});
11661202

1167-
it('allows to modify the html during html-webpack-plugin-before-html-processing event', done => {
1203+
it('allows to modify the html during html-webpack-plugin-after-template-execution event', done => {
11681204
let eventFired = false;
11691205
const examplePlugin = {
11701206
apply: function (compiler) {
11711207
compiler.plugin('compilation', compilation => {
1172-
HtmlWebpackPlugin.getHooks(compilation).beforeHtmlProcessing.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1208+
HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
11731209
eventFired = true;
1174-
object.assets.js.push({path: 'funky-script.js'});
1210+
object.bodyTags.push(HtmlWebpackPlugin.createHtmlTagObject('script', {src: 'funky-script.js'}));
11751211
object.html += 'Injected by plugin';
11761212
callback();
11771213
});
@@ -1200,12 +1236,12 @@ describe('HtmlWebpackPlugin', () => {
12001236
shouldExpectWarnings);
12011237
});
12021238

1203-
it('allows to modify the html during html-webpack-plugin-before-html-generation event', done => {
1239+
it('allows to modify the html during html-webpack-plugin-before-asset-tag-generation event', done => {
12041240
let eventFired = false;
12051241
const examplePlugin = {
12061242
apply: function (compiler) {
12071243
compiler.plugin('compilation', compilation => {
1208-
HtmlWebpackPlugin.getHooks(compilation).beforeHtmlGeneration.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
1244+
HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
12091245
eventFired = true;
12101246
object.assets.js.push({path: 'funky-script.js'});
12111247
callback();
@@ -1237,10 +1273,11 @@ describe('HtmlWebpackPlugin', () => {
12371273

12381274
it('fires the events in the correct order', done => {
12391275
const hookCallOrder = [
1240-
'beforeHtmlGeneration',
1241-
'beforeHtmlProcessing',
1276+
'beforeAssetTagGeneration',
12421277
'alterAssetTags',
1243-
'afterHtmlProcessing',
1278+
'alterAssetTagGroups',
1279+
'afterTemplateExecution',
1280+
'beforeEmit',
12441281
'afterEmit'
12451282
];
12461283
let eventsFired = [];

‎typings.d.ts

+25-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface HtmlWebpackPluginOptions {
2424
*/
2525
templateParameters:
2626
false // Pass an empty object to the template function
27-
| ((compilation: any, assets, options: HtmlWebpackPluginOptions) => {})
27+
| ((compilation: any, assets, assetTags: { headTags: Array<HtmlTagObject>, bodyTags: Array<HtmlTagObject> }, options: HtmlWebpackPluginOptions) => {})
2828
| {[option: string]: any}
2929
/**
3030
* The file to write the HTML to.
@@ -112,3 +112,27 @@ interface HtmlTagObject {
112112
*/
113113
innerHTML?: string
114114
}
115+
116+
/**
117+
* The values which are available during template execution
118+
*
119+
* Please keep in mind that the `templateParameter` options allows to change them
120+
*/
121+
interface HtmlWebpackPluginTemplateParameter {
122+
compilation: any,
123+
webpackConfig: any
124+
htmlWebpackPlugin: {
125+
tags: {
126+
headTags: HtmlTagObject[],
127+
bodyTags: HtmlTagObject[]
128+
},
129+
files: {
130+
publicPath: string,
131+
js: Array<{entryName: string, path: string}>,
132+
css: Array<{entryName: string, path: string}>,
133+
manifest?: string,
134+
favicon?: string
135+
},
136+
options: HtmlWebpackPluginOptions
137+
}
138+
}

0 commit comments

Comments
 (0)
Please sign in to comment.