javascript - 如何仅在生产模式下运行 'image-webpack-loader' webpack？

Question

版本:webpack 3.5.5当我在终端中运行 webpack -d --watch 时..

运行构建太慢了...总时间:174094ms

我在 webpack 中安装了 image-webpack-loader 来压缩我的 png 图像文件..

但是每次在开发模式下运行webpack -d --watch..它总是再次压缩..我如何在开发时只为加载程序运行一次...

我想在运行 webpack -p 构建生产代码时运行压缩加载器

这是我的 webpack 配置文件:

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

这个问题已经过时了，但我仍然想为 future 的访问者回答它。

您可以将 bypassOnDebug 选项添加到加载程序，如下所示。这确保了压缩在开发过程中被“绕过”，并且仅在生产过程中执行。这将极大地增强您在开发模式下的构建!

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

了解更多信息，您可以访问https://github.com/tcoopman/image-webpack-loader#usage