React-router / Webpack |使用react-router时，产品捆绑后无法呈现应用

Question

今天我遇到了一些问题，请尝试在产品模式下构建应用。

当我尝试将其与节点服务器一起使用时，它会加载（没有404），但是什么都没有显示。

当我从应用程序中删除路由器并仅渲染一些行时，一切正常。

所以我想我的产品配置有问题...

我在网上发现了一些有用的东西，似乎是一个类似的问题：https://github.com/webpack/webpack/issues/7110

webpack.common.js

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    main: path.resolve(__dirname, "../src", "index.js")
  },
  output: {
    filename: "[name].[hash].js",
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/"
  },
  devServer: {
    port: 3000,
    historyApiFallback: true,
    overlay: true,
    open: false
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: [{ loader: "babel-loader" }]
      },
      {
        test: /.*\.(gif|png|jp(e*)g|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 21000,
              name: "images/[name]_[hash:7].[ext]"
            }
          }
        ]
      },
      // Vendor CSS loader
      // This is necessary to pack third party libraries like antd
      // {
      //   test: /\.css$/,
      //   include: path.resolve(__dirname, "../node_modules"),
      //   use: ["style-loader", "css-loader"]
      // }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, "../public", "index.html")
    })
  ],
  resolve: {
    extensions: [".js", ".jsx"]
  }
};

webpack.prod.js

const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

const enableBundleAnalyzer = process.env.ENABLE_ANALYZER === "true";

module.exports = env => {
  const config = {
    mode: "production",
    output: {
      filename: "[name].[hash].js",
      path: path.join(__dirname, "..", "dist", env.app)
    },
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: MiniCssExtractPlugin.loader },
            { loader: "css-loader" }
          ]
        },
        {
          test: /\.s(a|c)ss$/,
          use: [
            { loader: MiniCssExtractPlugin.loader },
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ]
        }
      ]
    },
    optimization: {
      splitChunks: {
        chunks: "all"
      },
      runtimeChunk: false
    },
    plugins: [
      new CleanWebpackPlugin([path.resolve(__dirname, "../dist")], {
        root: process.cwd(),
        verbose: true,
        dry: false
      }),
      new OptimizeCssAssetsPlugin(),
      new MiniCssExtractPlugin({
        filename: "[name].[hash:8].css",
        chunkFilename: "[id].[hash:8].css"
      }),
      new ManifestPlugin(),
      new BundleAnalyzerPlugin({
        analyzerMode: enableBundleAnalyzer === true ? "static" : "disabled",
        openAnalyzer: true
      })
    ]
  };

  common.entry.main = path.join(__dirname, "..", "src", env.app, "app.js");
  common.output.publicPath = "./";

  console.log(common.entry)

  return merge(common, config);
};

如您所见，我没有使用uglyfier插件。

任何帮助都会很棒