Webpack & SCSS: how to work with image paths?

Dude, you saved my day useRelativePaths is not even mentioned in the webpack documentation anymore... and, even knowing about it, it still is too confusing, I had too go back one folder and then manually point to the output path again:

"options": {
    outputPath: (url, resourcePath, context) => {
        return `fonts/${url}`;
    },
    publicPath: '../fonts',
    useRelativePaths: true,
    name(resourcePath, resourceQuery) {
        return isDevelopment ? '[path][name].[ext]' : '[contenthash].[ext]'
    },
}

Thanks a lot for having taken the time to come back and answer your own question.

Problem solved by adding publicPath: '../' (docs) and useRelativePaths: true (docs):

module.exports = {
    // ...        
    module: {
        rules: [                 
            { 
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                            context: path.resolve(__dirname, "src/"),
                            outputPath: 'dist/',
                            publicPath: '../',
                            useRelativePaths: true
                        }
                    }
                ] 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
            allChunks: true
        })
    ]
};