diff --git a/packages/critters-webpack-plugin/package.json b/packages/critters-webpack-plugin/package.json
index 9d64582..891edc5 100644
--- a/packages/critters-webpack-plugin/package.json
+++ b/packages/critters-webpack-plugin/package.json
@@ -47,12 +47,12 @@
"devDependencies": {
"css-loader": "^4.2.1",
"file-loader": "^6.0.0",
- "html-webpack-plugin": "^3.2.0",
+ "html-webpack-plugin": "^4.5.2",
"mini-css-extract-plugin": "^0.10.0",
- "webpack": "^4.6.0"
+ "webpack": "^4.46.0"
},
"dependencies": {
- "critters": "^0.0.10",
+ "critters": "^0.0.13",
"minimatch": "^3.0.4",
"webpack-log": "^3.0.1",
"webpack-sources": "^1.3.0"
diff --git a/packages/critters-webpack-plugin/src/index.js b/packages/critters-webpack-plugin/src/index.js
index 1187e1d..7f9540a 100644
--- a/packages/critters-webpack-plugin/src/index.js
+++ b/packages/critters-webpack-plugin/src/index.js
@@ -62,7 +62,23 @@ export default class CrittersWebpackPlugin extends Critters {
tap(compiler, 'compilation', PLUGIN_NAME, false, (compilation) => {
this.options.path = compiler.options.output.path;
this.options.publicPath = compiler.options.output.publicPath;
- // ... which is how we get an "after" hook into html-webpack-plugin's HTML generation.
+
+ const hasHtmlPlugin = compilation.options.plugins.find(p => p.constructor && p.constructor.name === 'HtmlWebpackPlugin');
+ try {
+ var htmlPluginHooks = require('html-webpack-plugin').getHooks(compilation);
+ } catch (err) {}
+
+ const handleHtmlPluginData = (htmlPluginData, callback) => {
+ this.fs = compilation.outputFileSystem;
+ this.compilation = compilation;
+ this.process(htmlPluginData.html)
+ .then((html) => {
+ callback(null, { html });
+ })
+ .catch(callback);
+ };
+
+ // get an "after" hook into html-webpack-plugin's HTML generation.
if (
compilation.hooks &&
compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
@@ -72,16 +88,10 @@ export default class CrittersWebpackPlugin extends Critters {
'html-webpack-plugin-after-html-processing',
PLUGIN_NAME,
true,
- (htmlPluginData, callback) => {
- this.fs = compilation.outputFileSystem;
- this.compilation = compilation;
- this.process(htmlPluginData.html)
- .then((html) => {
- callback(null, { html });
- })
- .catch(callback);
- }
+ handleHtmlPluginData
);
+ } else if (hasHtmlPlugin && htmlPluginHooks) {
+ htmlPluginHooks.beforeEmit.tapAsync(PLUGIN_NAME, handleHtmlPluginData);
} else {
// If html-webpack-plugin isn't used, process the first HTML asset as an optimize step
tap(
diff --git a/packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap b/packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap
index 33fdd25..479c679 100644
--- a/packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap
+++ b/packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap
@@ -64,7 +64,7 @@ footer {
My first styled page
Welcome to my styled page!
-
+