15

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

2 Answers 2

37

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.

Sign up to request clarification or add additional context in comments.

3 Comments

/\.(ts|tsx)$/ can be /\.tsx?$/
What if you need more than one loader and also need options?
This solution works for Webpack4 as well.
-4

Removing 'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false', suddenly made all the warnings go away. So I guess that solved it - although I am not sure why, which isn't good:-)

1 Comment

This answer might be remotely useful if the question was related to image-webpack-loader

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.