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

Question

版本：在终端中运行webpack -d --watch时的webpack 3.5.5。

运行构建太慢了……总时间：174094ms

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

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

我想在运行webpack -p来生成生产代码时运行compress loader

这是我的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

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

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

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

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