Webpack 2: Błąd: opcje/zapytania nie mogą być używane z ładowarkami (użyj opcji dla każdego elementu tablicy)

Question

Próbuję dodać zapytanie do pliku .png/.ttf ładującego jako pakiet internetowy, w przeciwnym razie wyświetla ostrzeżenia o przestarzałości podczas kompilowania w inny sposób, po uaktualnieniu do pakietu internetowego 2.

Oto moja konfiguracja. Jak poprawnie dodać zapytania do zdjęć i czcionek?

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', 
        }, 
       ], 
       query: { 
        gifsicle: { 
         interlaced: false, 
        }, 
        optipng: { 
         optimizationLevel: 4, 
        }, 
        pngquant: { 
         quality: '75-90', 
         speed: 3, 
        }, 
       } 

      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file-loader?name=~/.local/share/Trash/[name].[ext]' 
      } 
     ] 
    }, 
}; 

Answer 1

Usunięcie 'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false', nagle spowodowało zniknięcie wszystkich ostrzeżeń. Więc myślę, że go rozwiązać - choć nie jestem pewien, dlaczego, co nie jest dobre :-)

Answer 2

miałem ten fragment w moim WebPACK config

{ test: /\.(ts|tsx)$/, 
    loader: ['ts-loader'], 
    options: { appendTsSuffixTo: [/\.vue$/] } }, 

Kiedy usunięte [] around „ts -loader "błąd zniknął, np

{ test: /\.(ts|tsx)$/, 
    loader: 'ts-loader', 
    options: { appendTsSuffixTo: [/\.vue$/] } }, 

Myślę, że komunikat mówi, że nie można użyć opcji/zapytania dla wielu programów ładujących. Nie może być tablicą, musi być pojedynczym modułem ładującym.