Webpack gzip compressed bundle not being served, the uncompressed bundle is

Question

I am trying out Webpack for the first time. I've been using Gulp with Browserify for some time and am pretty comfortable with it. At this point, I'm just testing out a couple of Webpack plugins. Namely the compression-webpack-plugin. I've never used compression before, so bear with me if I'm making any noob mistake.

Below is my webpack.config.js. The result is I get a main.js, main.js.gz, main.css and index.html. The main.js is injected into the index.html, but if I open index.html in my browser, it serves the uncompressed main.js, not the compressed main.js.gz. I had read that I wouldn't need to include the .gz extension in my script tag, and the html-webpack-plugin doesn't include it, so I figured things are working correctly, yet the uncompressed main.js is served, rather than the compressed one.

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  entry: './app/scripts/main.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js',
    chunkFilename: '[id].js'
  },
  module: {
    loaders: [
      {test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')},
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: 'app/index.html',
      inject: 'body'
    }),
    new ExtractTextPlugin('[name].css'),
    new CompressionPlugin()
  ]
};

Solution 1

To load main.js.gz instead of main.js in case of included main.js in script-tag, you need to configure your web-server (apache, nginx, etc.)

Remember that configuration should load .js.gz or .js depend on if browser accepts gzip. Web-server can check it in HTTP request header Accept-Encoding: gzip, deflate

In browser devtools you will see main.js in any cases.

Solution 2

You can conditionally serve gz statics easily with nginx gzip static module. The server checks if app.js.gz file for e.g. requested /statics/app.js is present and serves it transparently. There is no need to change your application or detect Accept-Encoding - all that is handled by nginx module. Here is config snippet:

location /statics/ {
  gzip_static on;
}

Solution 3

I'm a little late to this thread, but thought I'd add my 2c. I generated a gz file using webpack, but Apache kept serving the uncompressed one (or erroring if it wasn't present), despite Accept-Encoding being set correctly. Turns out I had to uncomment AddEncoding x-gzip .gz .tgz and reload httpd. For the record, AddType application/x-gzip .gz .tgz was already set, and I'm using Apache 2.4.6 with Chrome 62. Thanks to Dmitry above for nudging me to look at my conf/httpd.conf file.