Webpack gzip compressed bundle not being served, the uncompressed bundle is
<p>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.</p>

<p>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.</p>

<pre><code>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()
  ]
};
</code></pre>