Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Sigizmund2012 opened this issue Dec 4, 2019 · 6 comments
Open

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

Sigizmund2012 opened this issue Dec 4, 2019 · 6 comments
Labels
enhancement help wanted question

Comments

@Sigizmund2012
Copy link

Sigizmund2012 commented Dec 4, 2019 •
edited
Loading

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 -->
@thescientist13
Copy link
Collaborator

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!

@Sigizmund2012
Copy link
Author

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.
    ...
});

@thescientist13
Copy link
Collaborator

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

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

  1. Have the plugin accept another parameter, which would be a callback function you as a user would want to have run
  2. The plugin could save a reference to that in the constructor, e.g. this.userCallback
  3. Then within the callback of the generate function, if the user has provided a callback function, call it and forward the parameters to it
  4. 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.

@Sigizmund2012
Copy link
Author

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.

@yisenliu
Copy link

@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
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@thescientist13 @yisenliu @Sigizmund2012 and others