Реагировать приложение показывает пустой экран (иногда) в производстве?

Question

У меня есть приложение реагирования с конфигами веб-пакета.но иногда я получаю проблему с пустым экраном в обычном режиме браузера.Когда я открываю это в режиме инкогнито / приват, эта проблема не возникает.Из другой аналогичной проблемы, переход от BrowserRouter к HashRouter решил их проблему, но это не то же самое в моем случае, потому что у меня эта проблема возникает иногда (не все время) и примерно через 20 минут, или 40 минут, или 1 час (приблизительно).страница снова выглядит нормально.

Вот мои файлы package.json и config

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 run build - nohup npm run serv & (я иду в тот же каталог, в котором находится мой проект).

Еще один запрос, который я хочу задать, -> в настоящее время я использую webpack-dev-serverвместо того, что нужно использовать и Как я могу обслуживать мои файлы сборки?(эта часть меня действительно смущает)