title: webpack-dev-server - serve gzipped bundle
body: <p>I've added the <a href="https://github.com/webpack-contrib/compression-webpack-plugin" rel="nofollow noreferrer">CompressionPlugin</a> to my webpack config.</p>
  
  <pre><code>const webpack = require('webpack')
  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  var CompressionPlugin = require('compression-webpack-plugin')
  
  module.exports = {
    context: path.join(__dirname, '/src'),
    entry: {
      app: './app.js'
    },
    output: {
      path: path.join(__dirname, '/dist'),
      filename: '[name].bundle.js'
    },
    devServer: {
      contentBase: path.join(__dirname, '/src')
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [{
            loader: 'babel-loader'
          }]
        },
        {
          test: /\.(woff|woff2|eot|ttf)$/,
          use: ['url-loader?limit=10000']
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        favicon: 'favicon.ico',
        template: 'index.html'
      }),
      new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|html)$/,
        deleteOriginalAssets: true
      })
    ]
  }
  </code></pre>
  
  <p>Now instead of my <code>app.bundle.js</code> I have an <code>app.bundle.js.gz</code>. That's correct.</p>
  
  <p>However inside my index.html I'm still using the <code>app.bundle.js</code> path.</p>
  
  <p>How do I tell <a href="https://webpack.js.org/configuration/dev-server/" rel="nofollow noreferrer">webpack-dev-server</a> to serve the gzipped file when the browser requests <code>app.bundle.js</code>? In production proper web servers like Apache or nginx can do this.</p>