Webpack压缩的gzip捆绑包未被提供，未压缩的捆绑包已被提供。

Question

我第一次尝试使用Webpack。之前我用过Gulp和Browserify很长时间，并且对它们非常熟悉。现在，我只是在测试几个Webpack插件，具体来说是compression-webpack-plugin。我以前从未使用过压缩，如果我犯了任何新手错误，请见谅。

下面是我的webpack.config.js文件。运行结果是我得到了一个main.js、main.js.gz、main.css和index.html。main.js被注入到index.html中，但是如果我在浏览器中打开index.html，它会提供未经压缩的main.js，而不是已经压缩的main.js.gz。我读到过不需要在脚本标签中包含.gz扩展名，并且html-webpack-plugin没有包括它，所以我认为一切都正常工作了，但是还是提供了未经压缩的main.js，而不是压缩后的。

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

- Patrick Grimard

Answer 1

为了在脚本标签中加载main.js的时候，加载main.js.gz而不是main.js，你需要配置你的Web服务器（如apache、nginx等）。

请记住，配置文件应根据浏览器是否接受gzip来加载.js.gz或.js。Web服务器可以在HTTP请求头Accept-Encoding: gzip, deflate中进行检查。

在浏览器开发工具中，您将在任何情况下都看到main.js。

- Dmitry Yaremenko

---

我应该在IIs中做什么才能加载预先压缩的（非生成的）文件？ - Royi Namir

@RoyiNamir 你需要编写重写规则。 - Dmitry Yaremenko

我没有找到适当的规则来为js文件提供gz文件服务。 - Royi Namir

感谢您指明 devtools 正常显示扩展名，即使接收到 gzip 格式的文件。我已经检查过了，并在响应头中找到了以下内容： content-encoding: gzip我认为一切都正常工作，没有任何变化，感谢 webpack！ :-) - funder7

是我还是主要问题仍未得到回答：“如何将main.js.gz注入index.html而不是main.js？” - Pim van der Heijden

有关IIS配置，请参见答案：https://dev59.com/erDla4cB1Zd3GeqP4Cxg#53612311 - cweston

Answer 2

你可以使用nginx gzip static模块轻松地有条件地提供gz静态文件。服务器会检查是否存在要求的/statics/app.js的app.js.gz文件，并透明地提供服务。无需更改应用程序或检测Accept-Encoding，一切都由nginx模块处理。以下是配置片段：

location /statics/ {
  gzip_static on;
}

- gertas

Answer 3

我来晚了，但还是想发表一下我的看法。我使用webpack生成了一个gz文件，但Apache一直在提供未压缩的文件（或者如果未找到则出错），尽管Accept-Encoding已正确设置。原来我需要取消注释AddEncoding x-gzip .gz .tgz并重新加载httpd。值得一提的是，AddType application/x-gzip .gz .tgz已经设置好了，我使用的是Apache 2.4.6和Chrome 62。感谢上面的Dmitry提示我查看我的conf/httpd.conf文件。

- Nate