React生产环境显示空白页

Question

我遇到了一个webpack构建的问题，我运行的命令是：

cross-env NODE_ENV=production webpack --config webpack.prod.js

文件webpack.prod的内容如下：

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: path.join(process.cwd(), '/public'),
    publicPath: '/',
    filename: '[name].[hash].js'
},

plugins: [
    //new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
        mangle: {
            keep_fnames: true,
            except: ['$super']
        }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    })
  ]
});

webpack.common.js is

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var pkgBower = require('./package.json');

module.exports = {

entry: {
  'app': './main.js'
},

resolve: {
  root: path.join(__dirname, ''),
  modulesDirectories: ['node_modules', 'bower_components'],
  extensions: ['', '.js', '.jsx']
},

module: {
  loaders: [...]
},

devServer: {
  outputPath: path.join(__dirname, 'public')
},

plugins: [
  new HtmlWebpackPlugin({
      template: process.env.NODE_ENV == 'development' ? 'index.html' : 'index.prod.html',
      baseUrl: process.env.NODE_ENV == 'development' ? '/' : '/'
  })      
  ]
};

我可以运行构建，但不幸的是，当我打开index.html时，它对我显示一个空白页面。我想在Spring Boot项目中包含这个SPA，但我不知道该怎么做。谢谢！

- Lorenzo De Francesco

Answer 1

解决了！这是一个“browserHistory”的问题

如果你使用“browserHistory”作为历史管理器，你的webpack需要一个node.js服务器来运行，使用“hashHistory”可以像普通网页一样使用它！

参见 为什么React Webpack生产构建会显示空白页面？

- Lorenzo De Francesco

Answer 2

首先，Lorenzo，你使用的webpack版本是哪个？可能由于语法问题，它是1.X版本。

首先，在你的package.json文件中检查版本。然后，如果确实是1.x版本，你可以以调试模式构建。

export default {
    entry: [
        './src/Client.js'
    ],
    debug: true
}

在你的webpack.common.js文件中

检查错误并将其粘贴到此处。

我希望它能帮助你，欢迎访问StackOverflow，以下是几个可以改善我们社区的注意事项=)

- Yuri Pereira

---

嗨，Yuri，我正在使用版本1.14。 - Lorenzo De Francesco

启用调试模式。 - Yuri Pereira

我把我的webpack.common文件改成了这样： module.exports = { entry: { 'app': './main.js', }, debug:true, }然后我没有遇到任何错误。 - Lorenzo De Francesco

Answer 3

尝试在package.json文件中添加"main":"index.js" 这解决了我的问题。

  "main": "index.js",

  "scripts": {
    ...
  },

很高兴能帮忙。

- user3116317