我有一个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,但我不知道如何;)
谢谢!
答案 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": {
...
},
很乐意提供帮助。