Using Compression plugin alongside 'html-webpack-plugin'

[webpack-contrib]

Using Compression plugin alongside 'html-webpack-plugin'

[marcoturi]

@d3viant0ne Now that the PR is merged and published, can you show how to use this plugin with html-webpack-plugin? Thank you

[urikphytech]

Hi, I also can't find any documentation on how to make this work with html-webpack-plugin (i.e. have html-webpack-plugin write the path with the correct file extension).

Can anyone here point me in the right direction? I'd be happy to document it.
Thanks!

[retwedt]

Apparently this is a duplicate of #45

[farhan687]

No update even after a month?

[lucasvinals]

Hi guys, I've just wrote a simple plugin to connect both plugins.
It just listen for HtmlWebpackPlugin to complete it's build and then change the extensions to files that you specify.

You can download with yarn add change-extension-plugin or npm install change-extension-plugin --save. Cheers! 😃

[retwedt]

@lucasvinals Awesome I will check it out!

[nrandell]

I ran into this same problem today and pulled together a simple plugin based on the brotli-webpack-plugin that supports both brotli and gzip compression.
Have a look at brotli-gzip-webpack-plugin that I've shamlessly copied and modified from others. Hopefully it will help until the pull request to fix this gets accepted.

[nerdmax]

Just in case some one else find this issue later.

If you are using html-webpack-plugin along side compression-webpack-plugin and you want the html-webpack-plugin to reference the .gz file automatically.

You can try this plugin: html-webpack-change-assets-extension-plugin.

Eg:

plugins: [
  new HtmlWebpackPlugin({
    jsExtension: ".gz"
  }),
  new CompressionPlugin(), // compression plugin will generate the xxx.js.gz file
  new HtmlWebpackChangeAssetsExtensionPlugin()
];