js and css file path are not loaded by webpack5 when used with pug

Question

I'm using pug and scss with webpack 5. I have kept main.js and main.css both bundled by webpack but still the path is not resolved tried specific js path in src folder but same thing, they are not loading.

structure is like:

• src:
  • index.js
• style:
  • index.scss
• views:
  • pages:
    • home.pug
  • base.pug

Please help it out

error picture

webpack.config.js:-

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

const IS_DEVELOPMENT = 'dev'

module.exports = {
entry: [
    path.resolve(__dirname, 'src/index.js'),
    path.join(__dirname, 'styles/index.scss')
],
output:
{
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
plugins:
[
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, 'static') }
        ]
    }),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.resolve(__dirname, './views/pages/home.pug'),
        minify: true
    }),
    new MiniCSSExtractPlugin({
        filename: IS_DEVELOPMENT ? '[name].css' : '[name].[contenthash].css',
        chunkFilename: IS_DEVELOPMENT ? '[id].css' : '[id].[contenthash].css',
    })
],
module:
{
    rules:
    [
        
        {
            test: /\.(html)$/,
            use: ['html-loader']
        },
        {
            test: /\.(pug)$/,
            use: ['html-loader', 'pug-html-loader']
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use:
            [
                'babel-loader'
            ]
        },
        
        {
            test: /\.css$/,
            use:
            [
                MiniCSSExtractPlugin.loader,
                'css-loader'
            ]
        },

        {
            test: /\.scss$/,
            use:
            [
                {
                    loader: MiniCSSExtractPlugin.loader,
                    options: {
                        publicPath: ''
                    }
                },
                {
                    loader: 'css-loader'
                }, {
                    loader: 'resolve-url-loader'
                }, {
                    loader: 'sass-loader'
                }
            ]
        },

        {
            test: /\.(gltf|glb)$/,
            use:
            [
                {
                    loader: 'file-loader',
                    options:
                    {
                        outputPath: 'assets/models/'
                    }
                }
            ]
        },

        {
            test: /\.(jpg|png|gif|svg)$/,
            use:
            [
                {
                    loader: 'file-loader',
                    options:
                    {
                        outputPath: 'assets/images/'
                    }
                }
            ]
        },

        {
            test: /\.(ttf|eot|woff|woff2)$/,
            use:
            [
                {
                    loader: 'file-loader',
                    options:
                    {
                        outputPath: 'assets/fonts/',
                        name: 'fonts/[name].[ext]',
                        mimetype: 'application/font-woff',
                        publicPath: '../'
                    }
                }
            ]
        },

        {
            test: /\.(glsl|vs|fs|vert|frag)$/,
            exclude: /node_modules/,
            use: [
                'raw-loader',
                'glslify-loader'
            ]
        }
    ]
}
}