web-dev-qa-db-fra.com

React production affiche une page blanche

j'ai un problème avec une compilation webpack, la commande que je lance est

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

et le fichier webpack prod est:

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 est

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' ? '/' : '/'
  })      
  ]
};

je peux exécuter la construction, mais malheureusement, lorsque j’ouvre index.html, il affiche une page vierge. Je souhaite inclure ce SPA dans un projet d’amorçage printanier, mais je ne sais pas comment.)

Merci!

reactjswebpack
4
Lorenzo De Francesco

Résolu! était un problème de "browserHistory"

Si vous utilisez "browserHistory" en tant que gestionnaire d’historique, votre pack Web a besoin d’un serveur node.js pour fonctionner. Vous pouvez l’utiliser comme "hashHistory" comme page Web normale!

Voir Pourquoi la version de production de React Webpack affiche-t-elle une page vierge?

12
Lorenzo De Francesco

Tout d’abord, quelle version de Webpack utilisez-vous Lorenzo? Probablement à cause de la syntaxe, c'est 1.X. 

Tout d’abord, vérifiez dans votre fichier package.json quelle version est. Ensuite, si c'est vraiment 1.x vous pouvez construire en mode débogage.

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

Dans votre webpack.common.js

Vérifiez l'erreur, collez ici. 

J'espère que cela aide, bienvenue à StackOverflow , voici quelques notes qui peuvent améliorer notre communauté =) 

1
Yuri Ramos

Essayez de mettre "main": "index.js" dans le fichier package.json Cela a résolu mon problème.

  "main": "index.js",

  "scripts": {
    ...
  },

Heureux d'aider.

0
user3116317