React应用程序在生产中有时会显示黑屏？

Question

我有一个带有webpack配置的react应用程序。但有时我在正常的浏览器模式下出现黑屏问题。当我在隐身/私人模式下打开此文件时，不会发生此问题。从其他类似的问题来看，从BrowserRouter更改为HashRouter可以解决他们的问题，但是在我的情况下这并不相同，因为我的问题有时（并非所有时间）都在20分钟或40分钟或1小时（大约时间）后发生。该页面再次看起来很好。

这是我的package.json和配置文件

Package.json

"homepage": "/dev",
"scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --mode production --config webpack.prod.js",
    "serv": "webpack-dev-server --mode production --config webpack.prod.js - 
              -host dev-test.cc --port 65001"

  },
"devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/preset-env": "^7.2.3",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.5",
        "css-loader": "^2.1.0",
        "file-loader": "^3.0.1",
        "hard-source-webpack-plugin": "^0.13.1",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "webpack": "^4.28.3",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14",
        "webpack-merge": "^4.2.1"
      }

webpack.dev.js

      const path = require('path');
      var HtmlWebpackPlugin = require('html-webpack-plugin');
      var webpack = require('webpack');

      const basename = '/dev';

      module.exports = {
          mode: 'development',
          devtool: 'inline-source-map',
          entry: {
              'app': path.resolve('./src/index.js'),
          },
          devServer: {
              // publicPath: basename,
              historyApiFallback: true,
              disableHostCheck: true,
          },
          module: {
              rules: [
                  {
                      test: /\.(js|jsx)$/,
                      exclude: /node_modules/,
                      use: {
                          loader: "babel-loader",
                      },
                  },
                  {
                      test: /\.html$/,
                      use: [
                          {
                              loader: "html-loader",
                          },
                      ],
                  },
                  {
                      test: /\.css$/,
                      use: ["style-loader", "css-loader"],
                  },
                  {
                      test: /\.(pdf|jpg|png|gif|svg|ico)$/,
                      use: [
                          {
                              loader: 'url-loader',
                          },
                      ],
                  },
                  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
                  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
              ],
          },
          resolve:
          {
              alias: {
                  'handlebars': 'handlebars/dist/handlebars.js',
              },
          },
          output: {
              path: path.resolve(__dirname, './dist'),
              publicPath: '/',
              filename: '[name].bundle.js',
          },
          optimization: {
              runtimeChunk: {
                name: 'runtime'
              },
              splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                  vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                      const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                      return `npm.${packageName.replace('@', '')}`;
                    },
                  },
                }
              },
            },
          plugins: [
              new HtmlWebpackPlugin({
                  title: 'Dev test',
                  template: './src/index.html',
                  homepage: "/dev/",
              }),
              new webpack.DefinePlugin({
                'ApiUrl': JSON.stringify('https://dev-test.cc/api/'),
                'BaseName': JSON.stringify(basename),
              }),
              new webpack.HashedModuleIdsPlugin(),
          ],
      };

webpack.prod.js

const path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var webpack = require('webpack');

    const basename = '/dev';

    module.exports = {
      entry: {
        'app': path.resolve(__dirname, './src/index.js'),
      },
      devServer: {
        // publicPath: basename,
        historyApiFallback: true,
        disableHostCheck: true
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader"
              }
            ]
          },
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
          },
          {
            test: /\.(pdf|jpg|png|gif|svg|ico)$/,
            use: [
              {
                loader: 'url-loader'
              },
            ]
          },
          { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
          { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
        ]
      },
      resolve:
      {
        alias: {
          'handlebars': 'handlebars/dist/handlebars.js'
        }
      },
      output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/',
        filename: '[name].[contenthash].js',
      },
      optimization: {
        runtimeChunk: {
          name: 'runtime'
        },
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                return `npm.${packageName.replace('@', '')}`;
              },
            },
          }
        },
      },
      plugins: [
        new HtmlWebpackPlugin({
          title: 'Dev test',
          template: './src/index.html',
          homepage: "/dev/",
        }),
        new webpack.DefinePlugin({
          'ApiUrl': JSON.stringify('https://dev-test.cc/api/'),
                'BaseName': JSON.stringify(basename),
          'process.env': {
            'NODE_ENV': JSON.stringify('production')
          }
        }),
        new webpack.HashedModuleIdsPlugin(),
      ],
    };

我不知道这是我的构建问题，还是什么，因为在本地开发环境中这永远不会发生。我确实跟随我来运行项目，我认为我做得不好，因为我对生产/部署工作不熟悉。 -npm运行构建 -nohup npm运行serv＆ （我转到我的项目所在的目录）。

我要问的另一个查询是->当前我正在使用webpack-dev-server，而不是需要使用的内容，并且 我如何提供构建文件？ （这部分确实让我感到困惑）