可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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 } } }
翻译