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

Я пытаюсь добавить запрос для загрузки .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]'
            }
        ]
    },
};

Ответ 1

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

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

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

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

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

Ответ 2

Я столкнулся с той же проблемой, так как я нашел решение для себя. можешь попробовать:

--- вот решение ---

если вы определили "пресеты" в файле ".babelrc", вам не нужно указывать его в файле "webpack.config.js", затем удалите его, и он будет работать хорошо

Ответ 3

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