Gpp compressed package gpp gpp not serviced, uncompressed package

Question

This is my first time testing Webpack. I have been using Gulp with Browserify for some time, and it is very convenient for me. At the moment, I'm just testing a couple of Webpack plugins. Namely, a compression plugin for webpack plugin. I have never used compression before, so naked with me if I make a noob mistake.

Below is my webpack.config.js. As a result, I get main.js, main.js.gz, main.css and index.html. Main.js is entered in index.html, but if I open index.html in my browser, it serves uncompressed main.js, not compressed main.js.gz. I read that I do not need to include the .gz extension in my script tag, and html-webpack-plugin does not include it, so I decided that everything worked correctly, but uncompressed main.js and not compressed.

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

Answer 1

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

Remember that the configuration should load .js.gz or .js depending on whether the browser accepts gzip. The web server can check it in the header of the Accept-Encoding: gzip, deflate HTTP request Accept-Encoding: gzip, deflate

In the devtools browser, you will see main.js anyway.

Answer 2

You can easily set gz stats using the nginx gzip static module . The server checks if there is an app.js.gz file, for example. the requested /statics/app.js present and serves it transparently. There is no need to modify your application or detect Accept-Encoding - everything that is processed by the nginx module. Here is a fragment of the configuration:

 location /statics/ { gzip_static on; } 

Answer 3

I was a bit late on this topic, but thought I'd add my 2c. I created the gz file using webpack, but Apache continued to handle uncompressed (or an error if it was missing), despite the fact that Accept-Encoding installed correctly. Turns out I had to uncomment AddEncoding x-gzip .gz .tgz and reload httpd. For recording AddType application/x-gzip .gz .tgz has already been installed and I am using Apache 2.4.6 with Chrome 62. Thanks to Dmitry above for pushing me to see my conf / httpd.conf file.