html-critical-webpack-plugin How to avoid closing body and html tags in output file?

Hello! Is it possible to exclude closing body and html tags from the output file? The plugin puts these tags automatically, but I want to avoid this. My template looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My template</title>
</head>
<body>
    <!-- some code -->

Dec 04 '19 13:12 Sigizmund2012

Hi @Sigizmund2012

All this plugin does is wrap critical so it can be used as part of a webpack build. So unfortunately if there is an issue with the output, it would be with critical itself so I would recommend looking at their issue tracker / docs to see if you can get more help.

Hope that helps!

Dec 05 '19 01:12 thescientist13

But in the critical module there is an opportunity to get the HTML source code and modify it. There is no such possibility in html-critical-webpack-plugin.

critical.generate({
    base: 'test/',
    src: 'index.html',
    width: 1300,
    height: 900,
    inline: true
}, (err, ({css, html, uncritical})) => {
    // You now have critical-path CSS as well as the modified HTML.
    // Works with and without target specified.
    ...
});

Dec 05 '19 10:12 Sigizmund2012

ah, I see what you mean now, thank you.

it looks like then this could be easily supported then with the current implementation:

Have the plugin accept another parameter, which would be a callback function you as a user would want to have run
The plugin could save a reference to that in the constructor, e.g. this.userCallback
Then within the callback of the generate function, if the user has provided a callback function, call it and forward the parameters to it
You will need to add html as a second parameter to the callback function for generate

If you want to try for a PR I can help advise / provide feedback. If so, adding an example of it in the README would be good too.

Let me know your thoughts.

Dec 06 '19 00:12 thescientist13

I use webpack for development and do not know enough about its ecosystem of plugins. Therefore, I can hardly make a good pull request, sorry.

Dec 14 '19 15:12 Sigizmund2012

@Sigizmund2012 try to modify index.js like this:

const path = require('path');
const critical = require('critical');

class HtmlCriticalWebpackPlugin {

  constructor(options,callback) {
    this.options = options;
    this.userCallback =  callback;
  }

  emit(compilation, callback) {
    const css = Object.keys(compilation.assets)
      .filter(function (filename) { return /\.css$/.test(filename); })
      .map(function (filename) { return path.join(compilation.outputOptions.path, filename); });

    critical.generate(Object.assign({ css }, this.options), (err,html) => {
      callback(err);
      this.userCallback(html);
    });
  }

  apply(compiler) {
    compiler.hooks.afterEmit.tapAsync('HtmlCriticalWebpackPlugin', (compilation, callback) => {
      this.emit(compilation, callback);
    });
  }

}

module.exports = HtmlCriticalWebpackPlugin;

and your webpack.config.js:

new HtmlCriticalWebpackPlugin({...},function(html){
    console.log(html); // your statements
})

Dec 29 '19 13:12 yisenliu

To exclude closing tags: Check Plugin Settings: Look for options to control output format (partial templates, code snippets) in your plugin's settings. This might allow excluding boilerplate tags. Post-Processing (if needed): Text Editor: Open the output file and manually remove

and lines. Script: Write a short script to remove the tags and save the modified content.

I learnt this during my Full Stack Development Courses.

Apr 04 '24 08:04 DataSciencemumbai

html-critical-webpack-plugin html-critical-webpack-plugin copied to clipboard

How to avoid closing body and html tags in output file?

html-critical-webpack-plugin
html-critical-webpack-plugin copied to clipboard