运行webpack时，此警告打印约20次 - 它处理和捆绑很好，但这是什么意思？我该如何摆脱它？
不幸的是，谷歌搜索几乎没有帮助。
这是我的webpack配置：
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]'
}
]
},
};
警告样本（有很多！）
WARNING in ./~/vis/dist/img/network/addNodeIcon.png
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
@ ./~/css-loader!./~/vis/dist/vis.min.css 6:12847-12887
@ ./~/vis/dist/vis.min.css
WARNING in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3700-3752
@ ./~/bootstrap/dist/css/bootstrap.min.css
答案 0 :(得分：25)
您现在需要为特定优化器指定选项。所以以前的webpack 1.x loader配置像;
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对象，其中嵌入了查询。
请参阅 https://webpack.js.org/guides/migrating/ 和 deltones在这个问题上的评论; https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-275848595
答案 1 :(得分：10)
以上都不适用于我，从官方webpack2配置示例中获取灵感https://github.com/tcoopman/image-webpack-loader/blob/master/test/webpack2.config.js这对我有用
{
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
}
}
}
]
}
答案 2 :(得分：2)
Webpack 2现在支持＆＃34;查询对象＆＃34;语法，意味着您可以为查询参数创建一个separete对象。以下是image-webpack-loader在their documentation中推荐的方式。我用最新的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,
// }
// }
}
]
}
]
请注意，rules与webpack 1顶级loaders相同，use与单个加载程序级别的webpack 1 loaders相同（后面的一个） test）。正如您所看到的，之前令人困惑，这就是为什么架构已在webpack 2中重命名。
答案 3 :(得分：2)
这是由查询对象中的params现在属于其中一个子对象引起的。
例如：
这很糟糕：
'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
}
}
}
答案 4 :(得分：0)
image-webpack-loader的以下webpack2配置对我来说很好：
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 65
},
gifsicle: {
interlaced: true,
},
pngquant: {
quality: '65-90',
speed: 4
}
}
}