Webpack 2:警告 .png、.svg、.. 已弃用.在它自己的选项中配置 optipng 的 optimizationLevel 选项.(optipng.optimizationLevel) [英] Webpack 2: WARNING in .png, .svg, .. DEPRECATED. Configure optipng's optimizationLevel option in it's own options. (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.

这是我的 webpack 配置:

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.

见https://webpack.js.org/guides/migrating/和删除此问题中的评论；https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-275848595

See https://webpack.js.org/guides/migrating/ and deltones comments in this issue; https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-275848595

这篇关于Webpack 2:警告 .png、.svg、.. 已弃用.在它自己的选项中配置 optipng 的 optimizationLevel 选项.(optipng.optimizationLevel)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！