如何使用 Webpack 1.x 在 React 应用程序中创建生产构建答案

【问题标题】：How to create production build in react application with Webpack 1.x如何使用 Webpack 1.x 在 React 应用程序中创建生产构建
【发布时间】：2019-01-07 13:58:27
【问题描述】：

我无法为我的 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')
    ]
});

如果有人能指出我所缺少的问题，那将是非常有帮助的。提前致谢。

【问题讨论】：

标签： node.js reactjs webpack webpack-dev-server

【解决方案1】：

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

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

【讨论】：