Webpack 2: Ошибка: параметры/запрос не могут использоваться с загрузчиками (используйте параметры для каждого элемента массива)

Question

Я пытаюсь добавить запрос для загрузки .png/.ttf, поскольку webpack в противном случае дает мне предупреждения об отказе при компиляции в противном случае, после обновления до webpack 2.

Вот моя конфигурация. Как правильно добавить запрос для фотографий и шрифтов?

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

Снятие 'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false', внезапно заставил все предупреждения уйти. Так что я думаю, что решить ее - хотя я не знаю, почему, что не очень хорошо :-)

Answer 2

У меня был этот фрагмент кода в моей WebPack конфигурации

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

Когда я удалил [] вокруг «ц -loader 'ошибка исчезла, например

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

Я думаю, что в сообщении говорится, что вы не можете использовать параметры/запрос для нескольких загрузчиков. Он не может быть массивом, он должен быть одним загрузчиком.