Using Compression plugin alongside 'html-webpack-plugin'

[retwedt]

Is it possible to make the Html Webpack plugin insert a link to the .gz build file instead of the normal .js build file?

Is this even the right place to ask this question??

Thanks for your help, and thanks for your work on a great plugin!

[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.

[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!

[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()
];