refactor: use emit event instead of this-compilation

[ijpiantanida]

Notable Changes

Given that compression is most likely one of the last steps on the pipeline
chain, it makes sense that this plugin uses the emit event which is the last
step to add/modify assets before they're written to disk.

This plays nicely with other plugins that create and delete files
on the fly AFTER they're compiled
(for example https://github.com/jtefera/merge-files-webpack, which is the
recommeded solution for this issue
webpack-contrib/extract-text-webpack-plugin#179)

Issues

• Fixes doesn't seem to compress HTML from html-webpack-plugin #30
• Fixes Using Compression plugin alongside 'html-webpack-plugin' #57
• Fixes Doesn't hook up my files #62
• Fixes Compressing files copied by 'copy-webpack-plugin' #63

edited by @michael-ciniawsky (Formatting)

[michael-ciniawsky]

Marked as (:label: Minor) for now, but not 💯 if this should be considered a breaking change, personally I don't think so

[michael-ciniawsky]

👍

[genu]

Whats holding up this from being pulled?

[ilan-schemoul]

  entry: path.resolve(__dirname, 'client/src'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'client/dist'),
  },
  module: {
    rules: [
      {
        test: /\.html?$/,
        use: ['html-loader'],
      },
    ],
  },
  plugins: [
    new HtmlPlugin({
      filename: 'index.html',
    }),
    new CompressionPlugin(),
  ],
  target: 'web',

With this config my js gets compressed but not my HTML why ??

[alexander-akait]

@NitroBAY compression just create *.gz files and don't minify html content

[ilan-schemoul]

Yes I know but it creates a js file with its gz counterpart but the html file created by HtmlWebpackPlugin (shorten by HtmlPlugin here) is not having its gz version of it. I missing something because I'm new to webpack maybe but then what is it ?

[ilan-schemoul]

Even without htmlplugin but with file-loader/extract-loader :

module.exports = {
  entry: path.resolve(__dirname, 'client/src/index.js'),
  output: {
    path: path.resolve(__dirname, 'client/dist')
  },
  module: {
    rules: [{
      test: /\.html$/,
      loaders: [{
        loader: 'file-loader',
      },
        {
          loader: 'extract-loader',
        }],
    }],
  },
  plugins: [
    new CompressionPlugin(),
  ]
}
};

The output html is not gzipped is it normal ? How do I gzip html ?

[alexander-akait]

@NitroBAY seems you have default threshold https://github.com/webpack-contrib/compression-webpack-plugin/blob/master/src/index.js#L87 (i.e. gzip is not recommend for this html), just change value

[ilan-schemoul]

@evilebottnawi the default is 0 bytes. My html is not 130 bytes so it's greater than 0. Even when I set to 1 or whatever value it doesn't change a thing. Ratio has been also set to 0.

                                Asset       Size  Chunks             Chunk Names
95e8d881b9d1f966529393f226969b18.html  130 bytes          [emitted]
                              main.js  690 bytes       0  [emitted]  main
                           main.js.gz  399 bytes          [emitted]
Entrypoint main = main.js
   [0] ./node_modules/html-loader!./client/src/index.html 105 bytes {0} [built]
   [1] ./client/src/index.js 88 bytes {0} [built]

[nerdmax]

Any solutions to that? I just want the html-webpack-plugin to reference the .gz file

[nerdmax]

I've resolved this issue by implementing 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()
];

Please create an issue here if you encounter any issues related to that plguin.

[hedefalk]

@nerdmax Thx! Using it and it works!

I read quite a few issues that was being closed, for instance jantimon/html-webpack-plugin#61

I just want to clarify my need. Using only

new HtmlWebpackPlugin({
      template: './src/index.html',
      jsExtension: '.gz',
    }),
    new CompressionPlugin({
      test: /\.js(\?.*)?$/i,
    }),

I get:

~/d/p/kb-frontend ❯❯❯ ll dist/marko.*                                                                                                                                                                master ✭ ✱
-rw-r--r--  1 viktor  staff   382K Oct  7 22:39 dist/marko.7299746349ba7d1314da.js
-rw-r--r--  1 viktor  staff   108K Oct  7 22:39 dist/marko.7299746349ba7d1314da.js.gz
-rw-r--r--  1 viktor  staff   1.8M Oct  7 22:39 dist/marko.7299746349ba7d1314da.js.map

But then the output html isn't using the gz:

/d/p/kb-frontend ❯❯❯ cat dist/index.html                                                                                                                                                            master ✭ ✱
<!doctype html>
<html>
       …
    <script type="text/javascript" src="marko.7299746349ba7d1314da.js"></script>
    …
</html>

no matter which order I use HtmlWebpackPlugin and CompressionPlugin.

But with:

    new HtmlWebpackPlugin({
      template: './src/index.html',
      jsExtension: '.gz',
    }),
    new CompressionPlugin({
      test: /\.js(\?.*)?$/i,
    }),
    new HtmlWebpackChangeAssetsExtensionPlugin(),

I have:

~/d/p/kb-frontend ❯❯❯ cat dist/index.html                                                                                                                                                            master ✭ ✱
<!doctype html>
<html>
       …
    <script type="text/javascript" src="marko.7299746349ba7d1314da.js.gz"></script>
    …
</html>

Anyway, HtmlWebpackChangeAssetsExtensionPlugin worked for my use case.

[pimvanderheijden]

Is it me or is this simply broken with webpack v5?

Running

node --trace-deprecation node_modules/webpack/bin/webpack.js --config ./webpack-configs/webpack.prod-client.js

I get

[webpack-cli] TypeError: Cannot read property 'tapAsync' of undefined                                                                                                                                              
    at ... /node_modules/html-webpack-change-assets-extension-plugin/dist/html-webpack-change-assets-extension-plugin.umd.js:25:36

Node 14
Webpack v5
html-webpack-change-assets-extension-plugin 1.2.0
html-webpack-plugin 5.3.2

In html-webpack-plugin jsExtension seems to be deprecated, it doesn't appear to do anything and it's not in the docs.
Other than I've nothing worth mentioning in my html-webpack-plugin definition.
Also changing the order of creating the plugins does not change a thing.

[pimvanderheijden]

This is my webpack config by the way:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const HtmlWebpackChangeAssetsExtensionPlugin = require('html-webpack-change-assets-extension-plugin')

module.exports = {
    mode   : 'production',
    target : 'web',
    output: {
        filename      : '[name]-bundle.[fullhash].js',
        chunkFilename : '[name].js',
        path          : path.resolve(__dirname, '../build/'),
        publicPath    : '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template           : 'index.pug',
            jsExtension        : '.gz',
        }),
        new CompressionPlugin({
            test: /\.(js|css|html|svg|png|gif|jpg|woff|woff2|eot|ttf|otf)$/
        }),
        new HtmlWebpackChangeAssetsExtensionPlugin()
    ]
}