反应生产显示空白页

时间:2017-07-31 19:14:13

标签: reactjs webpack

我有一个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,但我不知道如何;)

谢谢!

3 个答案:

答案 0 :(得分:13)

解决!是" browserHistory"

的问题

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

请参阅 Why is React Webpack production build showing Blank page?

答案 1 :(得分:1)

首先,您使用Lorenzo的webpack版本是什么?可能由于语法原因,它是1.X.

首先,检查你的package.json文件是哪个版本。然后,如果它真的是1.x,你可以建立调试模式。

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

在您的webpack.common.js

检查错误,粘贴到此处。

我希望它有所帮助,欢迎来到StackOverflow,这里有一些可以改善我们社区的注释=)

答案 2 :(得分:0)

尝试在package.json文件中放入“ main”:“ index.js” 那解决了我的问题。

  "main": "index.js",

  "scripts": {
    ...
  },

很乐意提供帮助。