[英]Webpack 2: WARNING in .png, .svg, .. DEPRECATED. Configure optipng's optimizationLevel option in it's own options. (optipng.optimizationLevel)
運行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
您現在需要為特定優化器指定選項。 所以以前的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
以上都不適用於我,從官方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
}
}
}
]
}
Webpack 2現在支持“查詢對象”語法,這意味着您可以為查詢參數創建一個separete對象。 以下是image-webpack-loader
在其文檔中的推薦方法。 我用最新的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中重命名。
這是由查詢對象中的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
}
}
}
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
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.