问题
This WARNING is printed ~20 times when running webpack - it processes and bundles just fine, but what does it mean? How do I get rid of it?
Googling around provides little to no help unfortunately.
Here's my webpack config:
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]'
}
]
},
};
Sample of WARNINGS(there are many!)
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
回答1:
You now need to specify your options to the specific optimizer. so a previous webpack 1.x loader config like;
loaders: [
'file-loader?name=assets/[name].[ext]',
'image-webpack-loader?progressive=true&optimizationLevel=7&interlaced=true'
]
becomes
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,
}
}
}
}]
Note the options object, with the query embedded inside it.
See https://webpack.js.org/guides/migrating/ and deltones comments in this issue; https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-275848595
回答2:
None of the above was working for me, taking inspiration from the official webpack2 configuration example https://github.com/tcoopman/image-webpack-loader/blob/master/test/webpack2.config.js this is what worked for me
{
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
}
}
}
]
}
回答3:
Webpack 2 now supports "query object" syntax, meaning you can make a separete object for the query parameters. Here is how the image-webpack-loader recommends it in their documentation. I updated it with the newest webpack 2 naming standards:
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,
// }
// }
}
]
}
]
Note that rules is the same as webpack 1 top level loaders, and use is the same as webpack 1 loaders at the individual loader level (the one after test). As you can see, it was confusing before, which is why the schema has been renamed in webpack 2.
回答4:
This is caused by having params in the query object that now belong in one of the child objects.
for example:
This is bad:
'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
}
}
}
where this is good:
'file-loader',
{
loader: 'image-webpack-loader',
query: {
pngquant: {
quality: '65-90',
speed: 4
},
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: true
},
optipng: {
optimizationLevel: 7
}
}
}
回答5:
The following webpack2 config of image-webpack-loader works fine for me:
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 65
},
gifsicle: {
interlaced: true,
},
pngquant: {
quality: '65-90',
speed: 4
}
}
}
来源：https://stackoverflow.com/questions/42206190/webpack-2-warning-in-png-svg-deprecated-configure-optipngs-optimizatio