how to set content-encoding metadata tags in gzip header files?

Question

I am using webpack's compression plugin to gzip the content of files(html, js) and then I published gzip files removing the extension .gz to server(AWS/Nginx/Apache).

compression plugin of webpack's configuration:

new CompressionPlugin({   
  'asset': "[path]",
  'algorithm': "gzip",
  'test': /\.js$|\.css$|\.html$/,
  'threshold': 10240,
  'minRatio': 0.8
})

I have tried AWS, Nginx and Apache. on AWS i have to set content-encoding metadata explicitly after uploading the files.

On Nginx there is a much simpler solution - http_gzip_static_module.

location / {
  gzip_static on;
  rewrite ^/?$ /index.html break;
  root /srv/app;
}

by setting gzip_static on to Nginx server it provides correct Content-Type and Content-Encoding being passed to the client.

So in both AWS and on Nginx it's working fine and I am trying to achieve the same thing on apache server but it results in unexpected token in gzip files.

After debugging, I got to understand the files which are gzipped does not have content-encoding: gzip as metadata tags and resulting browser's request to fail.

I want to understand if there is any way in webpack compression plugin or in webpack where we can explicitly add metadata of file? or anyother way I can handle this issue.