Webpack 2: CẢNH BÁO trong .png, .svg, .. KHÔNG DÙNG. Cấu hình tối ưu hóa tùy chọn Optipng trong tùy chọn riêng của nó. (optipng.optimizationLevel)

Question

CẢNH BÁO này được in ~ 20 lần khi chạy webpack - nó xử lý và bó chỉ tốt, nhưng nó có nghĩa là gì? Làm sao để tôi bỏ nó đi?

Googling xung quanh cung cấp ít hoặc không giúp đỡ không may.

Dưới đây là cấu hình webpack của tôi:

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]' 
      } 
     ] 
    }, 
}; 

Mẫu CẢNH BÁO (có rất nhiều!)

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 

Answer 1

Bây giờ bạn cần phải xác định lựa chọn của bạn để tôi ưu hoa cụ thể. do đó, một cấu hình trình tải trước webpack 1.x trước đó như;

loaders: [ 
    'file-loader?name=assets/[name].[ext]', 
    'image-webpack-loader?progressive=true&optimizationLevel=7&interlaced=true' 
] 

trở thành

 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, 
      } 
     } 
     } 
    }] 

Lưu ý các tùy chọn đối tượng, với các truy vấn được nhúng bên trong nó.

Xem https://webpack.js.org/guides/migrating/ và deltones nhận xét trong số này; https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-275848595

Answer 2

Webpack 2 giờ đây hỗ trợ cú pháp "đối tượng truy vấn", nghĩa là bạn có thể tạo đối tượng tách cho tham số truy vấn. Đây là cách image-webpack-loader đề xuất nó trong their documentation. Tôi cập nhật nó với các tiêu chuẩn đặt tên mới nhất 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, 
     // } 
     // } 
     } 
    ] 
    } 
] 

Lưu ý rằng rules cũng giống như webpack 1 trên mức loaders, và use cũng giống như webpack 1 loaders ở cấp bộ nạp cá nhân (một trong những sau test). Như bạn có thể thấy, trước đây nó đã gây nhầm lẫn, đó là lý do tại sao lược đồ đã được đổi tên thành webpack 2.

Answer 3

Không có điều nào ở trên phù hợp với tôi, lấy cảm hứng từ ví dụ cấu hình webpack2 chính thức 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 
      } 
     } 
     } 
    ] 
    } 

Answer 4

sau config webpack2 của hình ảnh webpack-loader hoạt động tốt đối với tôi:

{ 
    loader: 'image-webpack-loader', 
    options: { 
     progressive: true, 
     optipng: { 
      optimizationLevel: 7, 
     }, 
     mozjpeg: { 
      quality: 65 
     }, 
     gifsicle: { 
      interlaced: true, 
     }, 
     pngquant: { 
      quality: '65-90', 
      speed: 4 
     } 
    } 
} 

Answer 5

này là do có params trong đối tượng truy vấn mà bây giờ thuộc về một trong những đối tượng trẻ em.

ví dụ:

này là xấu:

'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 
         } 
        } 
       } 

nơi này là tốt:

   'file-loader', 
       { 
        loader: 'image-webpack-loader', 
        query: { 
         pngquant: { 
          quality: '65-90', 
          speed: 4 
         }, 
         mozjpeg: { 
          progressive: true 
         }, 
         gifsicle: { 
          interlaced: true 
         }, 
         optipng: { 
          optimizationLevel: 7 
         } 
        } 
       }