Using Webpack to Handle Image Directory

Question

I am currently switching a web app to have its assets bundled using Webpack. Bundling JS and CSS was somewhat straightforward. Then came the turn of images. My question is how one can approach bundling images.

In particular, suppose I have static_src from which everything originates and static_compiled into which the bundled output is placed. I would like the image contents of static_src/img to move into static_compiled/img. How does one accomplish this?

On another note, is this a sensible approach or am I misunderstanding some philosophy behind Webpack and misusing it?

Current config is roughly like this:

var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    entry: { index: path.resolve(__dirname, "static_src", "index.js") },
    output: {
    path: path.resolve(__dirname, "static_compiled"),
    publicPath: "/static/", // Should match Django STATIC_URL
    filename: "[name].js",  // No filename hashing, Django takes care of this
    chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
    },
    plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    ],
    module: {
    rules: [
        {
        test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
        {
        test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"]},
        {
        test: /\.css$/, use: ["style-loader", "css-loader"]},
        {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: 'file-loader'},
        {
        test: /\.svg$/,
        loader: 'svg-inline-loader'},
        /* {
           test: /\.(ico|png|jpg|gif)$/,
           loader: 'file-loader'} */
        {
        test: /\.(ico|png|svg|jpg|gif|jpe?g)$/,
        use: [
            {
            options: {
                name: "[name].[ext]",
                outputPath: "img/"
            },
            loader: "file-loader"
            }
        ]
        }

        
    ],
    },
    resolve: {
    alias: {
            shared: path.resolve(__dirname, 'node_modules', 'bower_components')
    },
    extensions: ['.js', '.ts', 'jsx', 'tsx']
    },
    devServer: {
    writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
    }
}

Answer 1

The code I ended up using looks something like this.

plugins section:

    plugins: [...
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, `static_src/img`),
                    to: 'img',
                }
            ]
        }),

module-rules section:

module: {
    rules: [
            { ...

                test: /\.(ico|png|jpg|gif|jpe?g)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "img/"
                        }
                    }
                ]
            }