Question

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

我尝试了不同的方法，但是获得了针对更高版本而非针对Webpack 1.x版的解决方案

尝试过：

试图在npm start和npm run build中设置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，这有助于跨OS设置环境变量。

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

如何使用Webpack 1.x在React应用程序中创建生产版本

1 个答案: