Set the output for image-webpack-loader

Question

I'm trying to load images through the image-webpack-loader module, it works correctly, but instead of saving the image where the outputPath indicates, it saves it in the root directory of the project, does anyone know how to define the output of the images? I have read the entire documentation (webpack-image-loader) and I can not find any place where it says how to configure the output of files. Here I leave the my webpack.config.js

const autoprefixer = require('autoprefixer')

module.exports = {
entry: ['./assets/src/scss/index.scss', './assets/src/service/clanService.js', './assets/src/service/locationService',
    './assets/src/model/Clan.js', './assets/src/model/Location.js', './assets/src/model/Player.js',
    './assets/src/utils/material.js', './assets/src/utils/constants.js', './assets/src/utils/auxFunctions.js',
    './assets/src/fonts/Supercell-magic-webfont.generated.woff','./assets/src/images/Clash_Royale.png'],
output: {
    filename: './dist/bundle.js',
},
module: {
    rules: [
        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [
                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    options: {
                        bypassOnDebug: true, // webpack@1.x
                        disable: true, // webpack@2.x and newer
                        outputPath: '/dist/images/' // <-- Thats not work
                    },
                },
            ],
        },
        {
            test: /^(?!.*\.generated\.ttf$).*\.ttf$/,
            use: ['css-loader', 'fontface-loader'],
        }, {
            test: /\.generated.(ttf|eot|woff|woff2)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    outputPath: '/dist/fonts/',
                },
            }],
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: './dist/bundle.css',
                    },
                },
                {loader: 'extract-loader'},
                {loader: 'css-loader'},
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => [autoprefixer()],
                    },
                },
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: ['./node_modules'],
                    },
                }
            ],
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015'],
                plugins: ['transform-object-assign']
            },
        }
    ],
  },
}

As you can see I also have to enter the files one by one at the entry point, is it possible to add whole directories?

Answer 1

Answering a pretty old post here but I had the same issue today.

At least it may help someone else having the same problem.

Setting the outputPath for file-loader prior to image-webpack-loader solved it for me.

{
    test: /\.(gif|png|jpe?g|svg)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                outputPath: '/dist/images/'
            }
        },
        {
            loader: 'image-webpack-loader',
            options: { ... }
        }
    ]
}