如何仅在生产模式下运行“ image-webpack-loader” Webpack？

Question

Version: webpack 3.5.5 when i run the webpack -d --watch in terminal..

It just so slow to run the build ... Total Time: 174094ms

I install the image-webpack-loader in my webpack to compress my png images file..

but everytime run the webpack -d --watch in development mode.. it always compress again.. how do i run once only for the loader when in development...

I want run the compress loader when i run webpack -p to build production code

here is my webpack config file:

 const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './public/js/app.js', watchOptions: { poll: true }, output: { path: __dirname + '/public/js/', filename: 'app.bundle.js' }, module: { rules: [ { test: /\\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } }, { test: /\\.(ttf|otf|eot|svg|woff(2)?)(\\?[a-z0-9]+)?$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: '../font/' } } ] }, { test: /\\.png$/i, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: '../img/compress/' } }, { loader: 'image-webpack-loader', options: { optipng: { optimizationLevel: 7, }, pngquant: { quality: '65-90', speed: 4 } } } ] }, { test: /\\.css$/, exclude: /(node_modules)/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" } ) } ] }, plugins: [ new UglifyJSPlugin({ sourceMap: false, mangle: false, minimize: true, compress: true }), new ExtractTextPlugin({ filename: "../css/app.bundle.css" }) ] }; 

Answer 1

The question is outdated, but I still want to answer it for future visitors.

You can add the bypassOnDebug option to your loader, as shown below. This ensures that compression is 'bypassed' during development and only executed during production. This will greatly enhance your builds during development mode!

loader: 'image-webpack-loader',
         options: {
           bypassOnDebug: true,
         }

For more information, you can visit https://github.com/tcoopman/image-webpack-loader#usage