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' 
      } 
     ] 
    } 
};