如何僅在生產模式下運行“ 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