我正在做一个使用Webpack的Vue项目。当我在开发时，我在运行：

nodemon src/index.js
webpack --mode development --watch

现在我完成了我的项目，我想把它上传到一个共享主机。所以我做的是运行：

webpack --mode production

它创建了一个index.html和一个js。我面临的问题是，如果我试图打开index.html文件，它显示一个空白页面，而不是我的项目。
你知道我接下来要做什么吗？
这是我的webpack.js.js文件：

const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app/index.js',
    output: {
        path: __dirname + '/src/public/js',
        //path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader',
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                      outputPath: 'images',
                      name: '/images/[name].[ext]'
                    },
                  },
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: __dirname + '/src/public/index.html', // Use your custom template if needed
        }),
    ]
}