Изменено создание моего проекта из общей папки в подпапку dist, и это не сработает

Question

Изначально я обслуживал все свои активы из общей папки. Затем я хотел, чтобы мои ресурсы находились в папке dist, поэтому я отредактировал свои скрипты и файл webpack.config.js. Однако я заметил, что мойserve script если я нахожусь на странице создания расходов http://127.0.0.1:8080/createи обновите, приложение прерывается. Я не могу понять, что делать, чтобы на live-сервере обновление страницы создания расходов не нарушило работу приложения.

Вот мои скрипты из package.json:

"scripts": {
    "serve": "live-server public/",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack -p --env production",
    "server": "webpack-dev-server --open",
    "test": "jest --config=jest.config.json",
    "start": "node server/server.js",
    "heroku-postbuild": "npm run build:prod"
  },

А вот и мой конфигурационный файл webpack:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env) => {
    const isProduction = env === 'production'
    console.log(env);
    return {
        entry: './src/app.js',
        output: {
            path: path.join(__dirname, 'public', 'dist'),
            filename: 'bundle.js',
            publicPath: '/dist/'
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.s?css$/,
                use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true
                    }
                }]
            }]
        },
        devtool: isProduction ? 'source-map' : 'inline-source-map',
        devServer: {
            contentBase: path.join(__dirname, 'public'),
            historyApiFallback: true,
            publicPath: '/dist/',
            port: 3000
        },
        plugins: [new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: '../index.html'
        }), new MiniCssExtractPlugin({
            filename: 'styles.css'
        })]
    }
}

Мне нужна помощь в правильной подаче файлов.