反应生产显示空白页

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是

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它向我显示一个空白页面,我想在春季启动项目中包含此SPA,但我不知道如何;)

谢谢!

Answer 1

解决了!是一个"浏览器历史"的问题

如果您使用"browserHistory"作为历史管理器,您的webpack需要运行node.js服务器,使用"hashHistory"您可以将其用作普通网页!

请参阅 为什么React Webpack生成构建显​​示空白页面？