Javascript 网页2:png、.svg、…中的警告。。不赞成。配置optipng'；it中的优化级别选项'；我们有自己的选择。（optipng.optimizationLevel）

当运行

webpack

时，此警告会被打印约20次-它处理和绑定得很好，但这意味着什么？我怎样才能摆脱它

不幸的是，谷歌搜索几乎没有帮助

这是我的网页配置：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

var webpack = require("webpack");

module.exports = {
    entry: {
        dashboard: './js/main.js',
        vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis",],
    },
    output: { path: "../public", filename: 'bundle.js' },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}),
        new ExtractTextPlugin("/static/[name].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ],

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'es2015', 'react', 'stage-0',
                    ],

            }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}),
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=~/.local/share/Trash/[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false', {
                        loader: 'image-webpack-loader',
                    }
                ],

            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=~/.local/share/Trash/[name].[ext]'
            }
        ]
    },
};

警告示例（有很多！）

---

现在需要为特定的优化器指定选项。所以以前的Webpack1.x加载程序配置类似

loaders: [
  'file-loader?name=assets/[name].[ext]',
  'image-webpack-loader?progressive=true&optimizationLevel=7&interlaced=true'
]

变成

      use: [
    {
      loader: 'file-loader',
      options: {
        query: {
          name:'assets/[name].[ext]'
        }
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        query: {
          mozjpeg: {
            progressive: true,
          },
          gifsicle: {
            interlaced: true,
          },
          optipng: {
            optimizationLevel: 7,
          }
        }
      }
    }]

注意options对象，其中嵌入了查询

看 及 deltones对本期的评论； Webpack 2现在支持“查询对象”语法，这意味着您可以为查询参数创建一个单独的对象。下面是

图像网页包加载程序如何在中推荐它。我用最新的webpack 2命名标准对其进行了更新：

rules: [ // rules is formerly "loaders" in webpack 1
  {
    test: /\.(svg|jpe?g|png|gif|ico)(\?{0}(?=\?|$))/,
    use: [ // use is formerly "loaders" in webpack 1

      // file-loader has a bug where it doesn't yet recognize query object
      // syntax for webpack 2, so the query options `assets/images/[name].[ext]`
      // are ignored until they fix that,    
      // {
      //  loader: 'file',
      //  query: {
      //    name: 'assets/images/[name].[ext]'
      //   }   
      //},

      'file?name=assets/images/[name].[ext]', // or just 'file-loader'
      {
        loader: 'image-webpack',
        query: {
          progressive: true,
          optimizationLevel: 7,
          interlaced: false,
          pngquant: {
            quality: '65-90',
            speed: 4
          }
        }

       // you can also do it like this:
       // query: {
       //    mozjpeg: {
       //       progressive: true,
       //    },
       //    gifsicle: {
       //       interlaced: false,
       //    },
       //    optipng: {
       //       optimizationLevel: 7,
       //    }
       // }
      }
    ]
  }
]

请注意，
规则
与webpack 1顶级
加载程序
相同，
使用
与webpack 1
加载程序
在单个加载程序级别（测试后的加载程序）相同。正如您所看到的，这之前是令人困惑的，这就是为什么在webpack2中重命名了模式。
以上所有内容都不适用于我，从官方webpack2配置示例中获得了灵感这对我来说是有效的

  {
    test: /\.(png|jpe?g|gif|svg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          // path where the images will be saved
          name: 'assets/img/[name].[ext]'
        }
      },
      {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: {
            quality: 65
          },
          pngquant:{
            quality: "10-20",
            speed: 4
          },
          svgo:{
            plugins: [
              {
                removeViewBox: false
              },
              {
                removeEmptyAttrs: false
              }
            ]
          },
          gifsicle: {
            optimizationLevel: 7,
            interlaced: false
          },
          optipng: {
            optimizationLevel: 7,
            interlaced: false
          }
        }
      }
    ]
  }

以下webpack2配置的图像webpack loader对我来说很好：

{
    loader: 'image-webpack-loader',
    options: {
        progressive: true,
        optipng: {
            optimizationLevel: 7,
        },
        mozjpeg: {
            quality: 65
        },
        gifsicle: {
            interlaced: true,
        },
        pngquant: {
            quality: '65-90',
            speed: 4
        }
    }
}

这是因为查询对象中的参数现在属于某个子对象

例如：

这很糟糕：

 'file-loader',
                {
                    loader: 'image-webpack-loader',
                    query: {
                        progressive: true,
                        optimizationLevel: 7,
                        pngquant: {
                            quality: '65-90',
                            speed: 4
                        },
                        mozjpeg: {
                            progressive: true
                        },
                        gifsicle: {
                            interlaced: true
                        },
                        optipng: {
                            optimizationLevel: 7
                        }
                    }
                }

好的方面是：

                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    query: {
                        pngquant: {
                            quality: '65-90',
                            speed: 4
                        },
                        mozjpeg: {
                            progressive: true
                        },
                        gifsicle: {
                            interlaced: true
                        },
                        optipng: {
                            optimizationLevel: 7
                        }
                    }
                }

您不应该传递查询字符串参数，在webpack2中有一个用于该参数的查询部分。您能详细说明一下吗？查询区？我一直在寻找Webpack2示例配置，但运气不好。非常有用，谢谢。正如您所知，实际上并不需要
选项
对象。您可以直接进入
查询
。同样，也不需要使用
mozjpeg
、
gifsicle
和
optipng
。我将发布一个答案，其中包含一个对我不起作用的示例。需要在
选项中嵌套
查询
，以发出警告away@galarant检查下面我的答案。我不知道为什么它对你不起作用，但我发布的答案对我有用，我使用的是
webpack2.5.1
也对我有用。谢谢
                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    query: {
                        pngquant: {
                            quality: '65-90',
                            speed: 4
                        },
                        mozjpeg: {
                            progressive: true
                        },
                        gifsicle: {
                            interlaced: true
                        },
                        optipng: {
                            optimizationLevel: 7
                        }
                    }
                }