将 React 开发模式更改为生产模式答案

【问题标题】：Changing React dev mode to production mode将 React 开发模式更改为生产模式
【发布时间】：2018-05-04 09:48:36
【问题描述】：

我找不到任何有用的信息来帮助我了解如何在 React 中将开发模式更改为生产模式。我是否安装了任何其他软件包？缩小我的 js 和 css 文件的最佳插件是什么？

这是我的 webpack.config：

module.exports = {
entry: ["whatwg-fetch", "./js/app.jsx"],
output: {
    filename: "./js/out.js"
},
devServer: {
    inline: true,
    contentBase: './',
    port: 3001
},
watch: true,

module: {
    loaders: [{
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015','stage-2', 'react']
        }
    }, {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader' , 'sass-loader',]
    },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]'
                    }
                }
            ]
        }
    ]
}
};

【问题讨论】：

哪个版本的 webpack？
版本 - 3.11.0
React 中开发模式和生产模式之间的变化有什么作用？

标签： reactjs webpack webpack-production

【解决方案1】：

至于 webpack v4 使用 mode:

module.exports = {
  mode: 'production',
  entry: ["whatwg-fetch", "./js/app.jsx"],
  output: {
    filename: "./js/out.js"
  },

这会将process.env.NODE_ENV 设置为production。

对于早期版本，使用WebpackDefinePlugin 设置NODE_ENV：

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
]

【讨论】：