Il pacchetto compresso gzip Webpack non viene servito, il pacchetto non compresso è

Question

Sto provando Webpack per la prima volta. Sto usando Gulp con Browserify da un po 'di tempo e mi sento piuttosto a mio agio. A questo punto, sto solo testando un paio di plugin Webpack. Vale a dire il plug-in compressione-webpack. Non ho mai usato la compressione prima, quindi sono nudo con me se faccio qualsiasi errore di noob.

Di seguito è il mio webpack.config.js. Il risultato è che ho un main.js, main.js.gz, main.css e index.html. Il file main.js viene inserito nell'index.html, ma se apro index.html nel mio browser, serve il main.js non compresso, non il main.js.gz. compresso. Avevo letto che non avrei bisogno di includere l'estensione .gz nel mio tag script, e il plugin html-webpack non lo include, quindi ho pensato che le cose funzionassero correttamente, ma il main.js non compresso è servito, piuttosto che quello compresso.

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

Per caricare main.js.gz invece di main.js in caso di incluso main.js in script -tag, è necessario configurare il server web (Apache, nginx, etc.)

Ricordate che la configurazione dovrebbe caricarsi .js.gz o .js dipende se il browser accetta gzip. Il server Web può controllarlo nell'intestazione della richiesta HTTP Accept-Encoding: gzip, deflate

In browser devtools vedrete main.js in ogni caso.

Answer 2

È possibile servire condizionatamente gz statica facilmente con nginx gzip static module. Il server controlla se il file app.js.gz per es. richiesto /statics/app.js è presente e lo serve in modo trasparente. Non è necessario cambiare la tua applicazione o rilevare Accept-Encoding - tutto ciò che viene gestito dal modulo nginx. Ecco frammento di config:

location /statics/ { 
    gzip_static on; 
} 

Answer 3

Sono un po 'tardi per questa discussione, ma ho pensato di aggiungere la mia 2c. Ho generato un file gz usando il webpack, ma Apache continuava a servire quello non compresso (o l'errore se non era presente), nonostante Accept-Encoding fosse impostato correttamente. Risulta che ho dovuto annullare il commento AddEncoding x-gzip .gz .tgz e ricaricare httpd. Per la cronaca, AddType application/x-gzip .gz .tgz era già impostato, e sto usando Apache 2.4.6 con Chrome 62. Grazie a Dmitry in precedenza per avermi spinto a guardare il mio file conf/httpd.conf.