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]'
}
]
},
};
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With