webpack压缩不压缩

Question

我正在使用“compression-webpack-plugin”。运行 webpack 时没有出现任何错误。但是，我的文件都没有被压缩。这里有明显的配置错误吗？这是我的 webpack.config.js 文件。

      var path = require('path');
      var CompressionPlugin = require('compression-webpack-plugin');

        module.exports = {

        entry: path.resolve(__dirname, 'src') + '/app/app.js',
        output: {
            path: path.resolve(__dirname, 'dist') + '/app',
            filename: 'bundle.js',
            publicPath: '/app/'
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    include: path.resolve(__dirname, 'src'),
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015']
                    }
                },
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader'
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loader: 'file-loader'
                }
            ],
            plugins: [
                new CompressionPlugin({
                    asset: "[path].gz[query]",
                    algorithm: "gzip",
                    test: /\.js$|\.css$|\.html$/,
                    threshold: 10240,
                    minRatio: 0.8
                })
            ]
        }
        };

Here is my package.json file:

    {
      "name": "survey-reader",
      "version": "1.0.0",
      "description": "",
      "main": "app.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "npm run build",
        "build": "webpack -p && webpack-dev-server -p --content-base src/ --inline --hot --port 555 --history-api-fallback"
      },
      "repository": {
        "type": "git",
        "url": "https://gecgithub01.walmart.com/wsorto/survey-reader.git"
      },
      "keywords": [
        "react"
      ],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.17.0",
        "babel-loader": "^6.2.5",
        "babel-preset-es2015": "^6.16.0",
        "babel-preset-react": "^6.16.0",
        "compression-webpack-plugin": "^0.3.2",
        "css-loader": "^0.25.0",
        "file-loader": "^0.9.0",
        "gulp-gzip": "^1.4.0",
        "image-webpack-loader": "^3.0.0",
        "img-loader": "^1.3.1",
        "jquery": "^3.1.1",
        "style-loader": "^0.13.1",
        "webpack": "^1.13.2",
        "webpack-dev-server": "^1.16.2"
      },
      "dependencies": {
        "compression-webpack-plugin": "^0.3.2",
        "jquery": "^3.1.1",
        "react": "^15.3.2",
        "react-dom": "^15.3.2"
      }
    }

Answer 1

将插件移出模块对象。

var path = require('path');
var CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'src') + '/app/app.js',

    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },

    plugins: [
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ],

    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file-loader'
            }
        ]
    }
};