如何使用Webpack1.x创建生产内置react应用程序

Question

我无法为我的react应用程序创建生产构建。实际上，当我运行npm-run-build命令时，它正在获取dist文件夹并成功构建。但是，当我运行这个构建版本时，会在浏览器中获得红色图标。没有错误指示问题。我想我缺少了一些关于webpack配置的东西。

我尝试了不同的方法，但得到了更高版本的解决方案，而不是专门针对webpack 1.x 版本

已尝试：

尝试在npm启动和npm运行构建中设置NODE_ENV

尝试使用DefinePlugin在webpack.prod.js文件中设置生产环境。

结果：

React Developer Tool中仍有红色图标。

这是我正在运行的代码的更多细节，安装的节点包：

"react": "15.3.2",
"webpack": "1.13.3",
"webpack-dev-server": "1.16.2",
"extract-text-webpack-plugin": "1.0.1"

packages.json>脚本

"start": "webpack-dev-server --config webpack.dev.js --inline --progress --port 7000 --open"
"build": "npm run clean && webpack --config webpack.prod.js --progress --profile --bail"

Webpack.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var path = require('path');
module.exports = webpackMerge(commonConfig, {
output: {
path: path.join(process.cwd(), '/dist'),
publicPath: '/',
filename: '[name].[hash].js'
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
keep_fnames: true,
except: ['$super']
}
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new ExtractTextPlugin('[name].[hash].css')
]
});

如果有人能指出我所缺少的问题，那将是一个很大的帮助。提前谢谢。

Answer 1

添加cross-env，这有助于跨操作系统设置环境变量。

然后在你的npm脚本上："build": "cross-env NODE_ENV=production npm run clean && webpack --config webpack.prod.js --progress --profile --bail"