做的是 react 項(xiàng)目，在 webpack 中利用壓縮插件 compression-webpack-plugin 將
main.bundle.js 壓縮成了 main.bundle.js.gz ,看起來是邊小了，但是在從服務(wù)器上取下來的還是之前的 main.bundle.js ，問大牛們，怎么才能取到 main.bundle.js.gz 這個(gè)壓縮后的文件？取到 .gz 文件了，瀏覽器能正常解析嗎？或者說，到底怎么用 compression-webpack-plugin 插件？

下面是我的 webpack 部分配置文件：

const webpack = require('webpack');
const path = require("path");
const ConfigPath = require("./build/common/configPath");  // 配置路徑文件
const htwx = path.resolve(__dirname, "htweixin1/");

// 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');  

module.exports = {
    entry: {  //唯一入口文件，就像Java中的main方法
        vendor: ['react', 'react-dom', 'mobile-select', 'jquery'],
        tools: [__dirname + '/src/components/tools/myTools.js', __dirname + '/src/components/tools/newTools.js'],
        main: __dirname + '/src/main.js'
    },
    output: {//輸出目錄
        path: htwx,//打包后的js文件存放的地方
        publicPath: '/weixin/',
        filename: "dist/js/[name].bundle.js",  //打包后的js文件名
        chunkFilename: "dist/js/[name].min.js"
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }, {
                test: /^((?!\.sinosoft).)*(css)$/,
                use: ["style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,  // 在 css-loader 前應(yīng)用的 loader 的數(shù)
                            modules: false,   // 啟用 css-module 模式
                            minimize: true,  // css 壓縮
                        }
                    },
                    {
                        loader: "postcss-loader",  // 如果沒有 options 這個(gè)選項(xiàng)將會報(bào)錯(cuò) No PostCSS Config found
                        options: {
                            plugins: (loader) => [
                                require("autoprefixer")({ broswer: 'last 5 versions' })  // 自動加前綴
                            ]
                        }
                    }],
            }, {
                test: /\.sinosoft\.css$/,
                use: ["style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,  // 在 css-loader 前應(yīng)用的 loader 的數(shù)
                            modules: false,   // 啟用 css-module 模式
                            minimize: true,  // css 壓縮
                        }
                    }],
            }, {
                test: /\.(png|jpe?g|gif|svg|bmp)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10240, // 10KB 以下使用 base64
                        name: "dist/images/[name]-[hash:6].[ext]",
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', ".css", '.jsx'],  //自動補(bǔ)全識別后綴
        // 自定義常用文件路徑
        alias: {
            CSS: path.join(ConfigPath.static, 'css'),
            IMAGES: path.join(ConfigPath.static, 'images'),
            JS: path.join(ConfigPath.static, 'js'),
            COMMON: path.join(ConfigPath.src, 'components/common'),
            LAYOUT: path.join(ConfigPath.src, 'components/layout'),
            PAGE: path.join(ConfigPath.src, 'components/page'),
            TOOLS: path.join(ConfigPath.src, 'components/tools'),
            DATAMODULE: path.join(ConfigPath.static, "data"),
        }
    },
    plugins: [
        // 定義全局變量
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        // 將代碼中有重復(fù)的依賴包去重
        new webpack.optimize.DedupePlugin(),
        // 為組件分配ID，通過這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的ID
        new webpack.optimize.OccurrenceOrderPlugin(),
        // 壓縮JS代碼
        new webpack.optimize.UglifyJsPlugin(),
        // 公共代碼分離打包
        new webpack.optimize.CommonsChunkPlugin({
            name: [ "main", "tools", "vendor"],
            filename: "dist/js/[name].bundle1.js",
            chunkFilename: "dist/js/[name].chunk.js",
            minChunks: function (module) {
                // 該配置假定你引入的存在于 node_modules 目錄中
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        //為了避免vendor.*.js的hash值發(fā)生改變需要輸出一個(gè)manifest.*.js文件
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest', //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
            filename: "dist/js/[name].manifest.js",
        }),

        // 自動生成一個(gè) index.html 文件，并在 html 文件中引用 bundle.js 和 *.css 文件
        new HtmlWebpackPlugin({
            template: __dirname + "/build/template.tpl.html", //new 一個(gè)這個(gè)插件的實(shí)例，并傳入相關(guān)的參數(shù)
            filename: htwx + "/index.html",
            inject: true, // 自動注入
            minify: {  // 代碼壓縮
                removeComments: true,         // 刪除html中的注釋代碼
                collapseWhitespace: true,     // 刪除html中的空白符
                removeAttributeQuotes: true   // 刪除html元素中屬性的引號
            },
            //必須通過上面的 CommonsChunkPlugin 的依賴關(guān)系自動添加 js，css 等
            chunksSortMode: 'dependency'
        }),

        //gzip 壓縮
        new CompressionWebpackPlugin({
            asset: '[path].gz[query]',   // 目標(biāo)文件名
            algorithm: 'gzip',   // 使用gzip壓縮
            test: new RegExp(
                '\\.(js|css)$'    // 壓縮 js 與 css
            ),
            threshold: 10240,   // 資源文件大于10240B=10kB時(shí)會被壓縮
            minRatio: 0.8  // 最小壓縮比達(dá)到0.8時(shí)才會被壓縮
        }),

        // css 代碼分離
        new ExtractTextPlugin("dist/css/[name]-[hash:3].css"),

        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./manifest.json'),
        }),

        // 自定義插件
        (function () { }).prototype.apply = function (compiler) {
            console.log("\u4e0d\u662f\u6211\u9a97\u4f60\uff0c\u4eba\u4e11\u5c31\u8981\u591a\u8bfb\u4e66")
        },
        new webpack.BannerPlugin('author: Mobro Zhu'),

        // jQuery插件
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
    ],
};