Question

我是第一次尝试Webpack。我已经使用Gulp和Browserify一段时间了，我对它很满意。在这一点上，我只测试了几个Webpack插件。即compress-webpack-plugin。我之前从未使用压缩，所以如果我犯了任何noob错误，请耐心等待。

下面是我的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不包含它，所以我认为事情正常，但是未压缩的主要部分。服务的是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

要在main.js.gz - 标记中包含main.js的情况下加载main.js而不是script，您需要配置您的网络服务器（apache，nginx等））

请记住，配置应加载.js.gz或.js，具体取决于浏览器是否接受gzip。 Web服务器可以在HTTP请求标头Accept-Encoding: gzip, deflate

中进行检查

在浏览器devtools中，您将在任何情况下看到main.js。

Answer 2

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

location /statics/ {
  gzip_static on;
}

Answer 3

我对这个帖子有点迟，但我想我会加上我的2c。我使用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文件。

没有服务的Webpack gzip压缩包，未压缩的包是

3 个答案: