Question

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

运行构建速度太慢......总时间：174094ms

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

但每次都在开发模式下运行webpack -d --watch ..它总是再次压缩..如何在开发中仅为加载器运行一次...

当我运行webpack -p来构建生产代码

时，我想运行压缩加载程序

这是我的webpack配置文件：

＆＃13;

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"
        })
        
    ]
};

＆＃13;

Answer 1

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

您可以将bypassOnDebug选项添加到加载程序，如下所示。这可确保绕过压缩＆＃39;在开发期间，仅在生产期间执行。这将大大增强您在开发模式下的构建！

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

有关详细信息，请访问https://github.com/tcoopman/image-webpack-loader#usage

我如何运行＆＃39; image-webpack-loader＆＃39; webpack只在生产模式下？

1 个答案: