webpack 4 path issues with images and js files

Question

I am using webpack 4 and for some reason I can't get the .js files to go into a folder called /js/ and my image files will not go into a images folder. Here is my webpack configuration file. Ideally it would be nice to see the images retain the source and path names. Here is my configuration file

    const HtmlWebPackPlugin = require("html-webpack-plugin");
    const path = require('path');

    module.exports = {

    entry: [
        './src/index.js'
    ],
    output: {
        path: path.resolve(__dirname, "public"), // string
        publicPath: 'js/',
        filename: "desktop.js"
    },

    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
            loader: "babel-loader?presets[]=es2015"
            }
        },

        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [
            'file-loader',
            {
                loader: 'image-webpack-loader',
                options: {
                name: '[path][name].[hash].[ext]',
                publicPath: '[path][name]',
                bypassOnDebug: true,
                },
            },
            ],
        },



        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        },



        {
            test: /\.html$/,
            use: [
            {
                loader: "html-loader",
                options: { minimize: false }
            }
            ]
        }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
        })
    ]
    };