如何使用Webpack 1.x在React應用程序中創建生產版本

Question

我無法為我的React應用程序創建生產版本。 實際上，當我運行npm run build命令時，它正在獲取dist文件夾並成功構建。 但是，當我運行此版本時，在瀏覽器中顯示紅色圖標。 沒有錯誤指示問題。 我想我缺少Webpack配置的東西。

我嘗試了不同的方法，但獲得了更高版本的解決方案，而不是針對Webpack版本1.x的解決方案

嘗試過：

試圖在npm start和npm run build中設置NODE_ENV

嘗試使用DefinePlugin在webpack.prod.js文件中設置生產環境。

結果：

仍然在React Developer Tool中獲得紅色圖標。

這是我正在運行的代碼（已安裝Node軟件包）的更多詳細信息：

"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"