Question

我已经完成了我的ReactJS应用程序，我想把它投入生产。我运行下一个命令：$(document.getElementById(divName)).append($label);但是在Chrome F12中我得到下一个错误：webpack --progress -p。

这是我的webpack.config.js：

index.js:1 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See WebSiteFbReactJs for more details.

这个错误是什么？一切都好，对吧？我该怎么解决这个问题？谢谢。

编辑：我也遇到了下一个错误：'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) }) ] }

Answer 1

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

在您的情况下，在plugins部分中添加：

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

请参阅documentation about optimizing the production build with React，尤其是Webpack section。

对于源地图的错误，似乎链接已损坏并返回404 Not Found错误，因此Chrome无法获取Bootstrap CSS的原始源代码映射。这不是一个大问题，因为您可能无法查看它的来源，但这可能是您的Webpack构建在构建应用程序时未部署源地图的信号。请将devtool: 'source-map'添加到您的配置文件中，以便生成源映射，这将通过将捆绑代码转换为原始源文件来改善生产调试体验。

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

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

有许多可能的优化，有关详细信息，请参阅此optimization guide。

部署ReactJS应用程序生产

1 个答案: