2017-07-31 115 views
1

我有一個問題用的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在春季啓動項目,但我不知道如何;)

謝謝!

回答

2

解決了!是一個「browserHistory」的問題

如果您使用「browserHistory」作爲歷史記錄管理器,您的webpack需要使用「hashHistory」來運行node.js服務器,您可以將其用作普通網頁!

Why is React Webpack production build showing Blank page?

0

首先,你使用Lorenzo是哪個版本的webpack?可能由於語法,它是1.X.

首先,檢查你的package.json文件是哪個版本。然後,如果它真的是1.x,你可以建立在調試模式下。

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

您webpack.common.js內

檢查錯誤,貼在這裏。

我希望它能幫助,歡迎StackOverflow,這裏是可以提高我們社區的一些註釋=)

+0

嗨尤里,我使用的是1.14版 –

+0

啓用調試模式,然後。 –

+0

我改變了我的webpack.common這樣 module.exports = { 項:{ '應用':」 ./main.js', }, \t調試:真,} ,我沒有趕上任何錯誤 –