Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack 2: Error: options/query cannot be used with loaders (use options for each array item)

I'm trying to add query's for .png/.ttf loading as webpack otherwise gives me warnings about deprecation when compiling otherwise, after upgrading to webpack 2.

Here's my config. How do I add the query's for photos and fonts properly?

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]'
            }
        ]
    },
};
like image 932
cbll Avatar asked Feb 14 '17 08:02

cbll


People also ask

When using Webpack Why would you need to use a loader?

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node. js.

What are loaders and plugins in Webpack?

Loaders work at the individual file level during or before the bundle is generated. Plugins: Plugins work at bundle or chunk level and usually work at the end of the bundle generation process.

What is loader in JavaScript?

A module loader is typically some library that can load, interpret and execute JavaScript modules you defined using a certain module format/syntax, such as AMD or CommonJS.


1 Answers

I had this snippet in my webpack config

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

When I removed the [] around 'ts-loader' the error went away, e.g.

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

I think the message is saying you can't use options/query for multiple loaders. It can't be an array, it has to be a single loader.

like image 97
reggaeguitar Avatar answered Sep 20 '22 19:09

reggaeguitar