本文介绍了Webpack 2:警告.png,.svg,..已弃用。在它自己的选项中配置optipng的optimizationLevel选项。 (optipng.optimizationLevel)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
运行 webpack
时,此警告打印约20次 - 它处理和捆绑很好,但这是什么意思?我如何摆脱它?
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.
这是我的网络包config:
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]'
}
]
},
};
警告样本(有很多!)
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加载器配置就好;
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'
]
变为
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.
请参阅
和
在这个问题上发表评论;
这篇关于Webpack 2:警告.png,.svg,..已弃用。在它自己的选项中配置optipng的optimizationLevel选项。 (optipng.optimizationLevel)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!