部署ReactJS应用程序生产

我已经完成了我的ReactJS应用程序，我想把它投入生产。我运行了下一个命令：

webpack--progress-p

，但在chrome F12中，我得到了下一个错误：

index.js:1警告：看起来您使用的是React开发版本的缩小副本。将React应用程序部署到生产环境时，请确保使用跳过开发警告且速度更快的生产环境。有关详细信息，请参见网站fbjs。

这是我的webpack.config.js：

'use strict';

const WEBPACK = require('webpack');
const PATH = require('path');
const CopyFiles = require('copy-webpack-plugin');
const BaseName = "/upct";

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    context: __dirname,
    entry: {
        app: ['./src/index.jsx']
    },
    output: {
        path: PATH.join(__dirname, '/public'),
        /*path: './public',*/
        publicPath: BaseName+'/',
        filename: 'index.js'
    },
    devServer: {
        host: 'localhost',
        port: 3000,
        contentBase: PATH.join(__dirname, '/public'),
        inline: true,
        historyApiFallback: true,
        headers: { "Access-Control-Allow-Origin": "*" }
    },
    module: {
        loaders: [
            {
                test: /(\.js|.jsx)$/,
                loader: 'babel',
                query: {
                    "presets": [
                        "es2015",
                        "react",
                        "stage-0"
                    ],
                    "plugins": [
                        "react-html-attrs",
                        "transform-decorators-legacy",
                        "transform-class-properties"
                    ]
                }
            }
        ]
    },
    plugins: [
        new WEBPACK.DefinePlugin({
            BASENAME: JSON.stringify(BaseName)
        })
    ]
}

这个错误可能是什么？。一切都好，对吗？我怎样才能解决这个问题？多谢各位

---

编辑：我也遇到下一个错误：

DevTools无法解析SourceMap:http://MYSERVER.com/upct/src/css/bootstrap.css.map

请将

节点_ENV='production'

环境变量添加到您的Web包生成中，以禁用调试信息和警告，大多数属性类型检查和其他开发人员友好的工具。这将使应用程序更快，但更难调试。仅在部署到生产环境时使用此选项

在您的情况下，只需在

插件

部分添加：

new WEBPACK.DefinePlugin({
    'process.env': {
        'NODE_ENV': JSON.stringify('production')
    }
}),

请特别注意

至于源代码映射的错误，似乎链接已断开并返回404 Not Found错误，因此Chrome无法获取Bootstrap CSS的原始源代码映射。这不是一个大问题，因为您可能不会查看它的源代码，但这可能是一个信号，表明您的网页构建在构建应用程序时没有部署源代码映射。请添加到您的配置文件中，以便生成源映射，通过将捆绑代码转换为原始源文件来改善生产调试体验

将通过重命名变量、函数名和其他优化技巧最小化代码大小。您可以使用相同的方式将其添加到配置文件的

插件部分：

new WEBPACK.optimize.UglifyJsPlugin({
    compress: {
        // suppresses warnings, usually from module minification
        warnings: false,
    },
}),

有许多可能的优化，有关更多信息，请参见此。
请将
NODE\u ENV='production'
环境变量添加到您的Webpack构建中，以便禁用调试信息和警告、大多数属性类型检查和其他开发人员友好的工具。这将使应用程序更快，但更难调试。仅在部署到生产环境时使用此选项

在您的情况下，只需在
插件
部分添加：

new WEBPACK.DefinePlugin({
    'process.env': {
        'NODE_ENV': JSON.stringify('production')
    }
}),

请特别注意

至于源代码映射的错误，似乎链接已断开并返回404 Not Found错误，因此Chrome无法获取Bootstrap CSS的原始源代码映射。这不是一个大问题，因为您可能不会查看它的源代码，但这可能是一个信号，表明您的网页构建在构建应用程序时没有部署源代码映射。请添加到您的配置文件中，以便生成源映射，通过将捆绑代码转换为原始源文件来改善生产调试体验

将通过重命名变量、函数名和其他优化技巧最小化代码大小。您可以使用相同的方式将其添加到配置文件的
插件部分：

new WEBPACK.optimize.UglifyJsPlugin({
    compress: {
        // suppresses warnings, usually from module minification
        warnings: false,
    },
}),

有许多可能的优化，有关更多信息，请参见此。
好的！非常感谢。然后，如果我不是在生产（对于下一个项目），我只会删除
'production'
，并将
'developing'
放在例如？。我试过了，效果很好！非常感谢。我不需要更多来提高项目的效率，对吗？正如我在文档中看到的那样，
optimize.UglifyJsPlugin
。。。我不确定。另外，我添加了一个编辑：在我的提问中，请看，非常感谢你的帮助。我已经更新了关于源地图和UglifyJs的答案。对于开发/生产设置，您可以更改值或注释/取消注释它们，或者创建两个单独的配置文件—一个用于生产，另一个用于开发。您也可以使用
ifs
并根据需要设置不同的值。好的！非常感谢。然后，如果我不是在生产（对于下一个项目），我只会删除
'production'
，并将
'developing'
放在例如？。我试过了，效果很好！非常感谢。我不需要更多来提高项目的效率，对吗？正如我在文档中看到的那样，
optimize.UglifyJsPlugin
。。。我不确定。另外，我添加了一个编辑：在我的提问中，请看，非常感谢你的帮助。我已经更新了关于源地图和UglifyJs的答案。对于开发/生产设置，您可以更改值或注释/取消注释它们，或者创建两个单独的配置文件—一个用于生产，另一个用于开发。如果愿意，您也可以使用
ifs
并设置不同的值。