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

Answer 1

我有点晚了，但我想我会添加我的 2c。我使用 webpack 生成了一个 gz 文件，但是尽管 Accept-Encoding 设置正确，Apache 仍然提供未压缩的文件（或者如果它不存在则出错）。结果我不得不取消注释AddEncoding x-gzip .gz .tgz 并重新加载httpd。作为记录，AddType application/x-gzip .gz .tgz 已经设置好了，我正在使用 Apache 2.4.6 和 Chrome 62。感谢上面的 Dmitry 提醒我查看我的 conf/httpd.conf 文件。

Answer 2

您可以使用nginx gzip static module 轻松有条件地提供gz 静态数据。服务器检查 app.js.gz 文件是否为例如请求的/statics/app.js 存在并透明地提供它。无需更改您的应用程序或检测Accept-Encoding - 所有这些都由 nginx 模块处理。这是配置sn-p：

location /statics/ {
  gzip_static on;
}

Answer 3

如果script-tag 中包含main.js，要加载main.js.gz 而不是main.js，您需要配置您的网络服务器（apache、nginx 等）

请记住，配置应加载 .js.gz 或 .js 取决于浏览器是否接受 gzip。 Web-server 可以在 HTTP 请求头 Accept-Encoding: gzip, deflate 中检查它

在浏览器 devtools 中，您无论如何都会看到 main.js。