Question

我有一个问题，当使用简单节点服务器时，我的反应生产版本显示空白页。我试图以不同的方式解决这个问题，但找不到解决方案。任何建议如何解决此问题将不胜感激。我正在使用BrowserRouter作为客户端的路由选项。

这是我用于生产版本的webpack.common.js代码：

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const outputPath = path.join(__dirname, "dist");
const port = process.env.PORT || 8000;

module.exports = {
  context: __dirname,
  entry: {
    main: ["@babel/polyfill", "./src/App.js"]
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  resolve: {
    modules: ["node_modules", "./src"],
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader!sass-loader"
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })
      },
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        loaders: ["file-loader"]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("bundle.css"),
    new HtmlWebpackPlugin({
      baseUrl: process.env.NODE_ENV == 'development' ? '/' : '/',
      filename: "index.html",
      template: path.join(__dirname, "./public/index.html")
    })
  ],
  devServer: {
    port,
    historyApiFallback: true,
    publicPath: "/"
  }
};

这是编译器运行生产版本的条目：

const webpack = require('webpack');
const merge = require('webpack-merge');

const webpackCommonConfig = require('./webpack.config.common');

module.exports = merge(webpackCommonConfig, {
    plugins: [
        new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
    ],
    devtool: "source-map",
    devServer: {
        compress: true,
    },
});

这是节点服务器为应用程序提供服务的代码：

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8000
const fs = require('fs');
const app = express()


app.get(['/bundle.css', '/bundle.css.map'], (req, res) => {
    res.writeHead(200, {'Content-Type': 'text/css'});
    fs.createReadStream(path.resolve(__dirname, `../dist/${req.url}`)).pipe(res);
})

app.get(['/bundle.js', '/bundle.js.map'], (req, res) => {
    res.writeHead(200, {'Content-Type': 'text/javascript'});
    fs.createReadStream(path.resolve(__dirname, `../dist/${req.url}`)).pipe(res);
})
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, '../dist', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

这是被编译到dist文件夹中的index.html：

<!DOCTYPE html>
<html lang="en" style="height:100%">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.gif">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Zoi</title>
  <link href="bundle.css" rel="stylesheet"></head>
  <body style="height:100%">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

React生产版本显示空白页

0 个答案: