如何将 React 置于生产模式？答案

【问题标题】：How to put React in production mode?如何将 React 置于生产模式？
【发布时间】：2018-06-03 09:55:13
【问题描述】：

我尝试使用来自here 的解决方案，但图标仍显示为开发模式。

这是我当前的文件，其中包含以下答案的更新：

const path = require('path');
const SRC_DIR = path.join(__dirname, '/client-react/src');
const DIST_DIR = path.join(__dirname, '/client-react/dist');
const webpack = require('webpack')

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  plugins: [
    new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')} })
  ],
  module: {
      loaders: [
      {
        test: /\.jsx?/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          plugins: ["transform-object-rest-spread", "transform-class-properties"],
          presets: ['react', 'es2015']
       }
      }
    ]
  }
};

【问题讨论】：

如果使用实际的环境变量会发生什么，如NODE_ENV=production ./node_modules/webpack/bin/webpack.js？
似乎是正确的，你能测试一下 production 是否设置为 env 变量吗？您可以在 index.js 中使用 console.log(process.env.NODE_ENV) 来做到这一点

标签： javascript reactjs

【解决方案1】：

如果您使用 Webpack 4，则无需更改 webpack.config.js。它在开发和生产模式中保持不变。

唯一需要的就是你的package.json：

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
}

有了这个，创建一个开发包：

npm run dev

生产包：

npm run build

【讨论】：

【解决方案2】：

有同样的错误，所以我做了这个修复它：

package.json

"scripts": {
  "build": "NODE_ENV=production webpack --progress --colors",
  "start": "NODE_ENV=development webpack-dev-server --progress --colors"
}

webpack.config.js

const env = process.env.NODE_ENV

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env)
    })
  ]
}

它应该可以正常工作。

Here我有一些配置，你可以尝试优化你的构建。

【讨论】：

无法从命令行运行 webpack 的原因是它是本地安装的。如果您使用npm i -g webpack，您将能够在任何地方使用它，但不建议这样做。

【解决方案3】：

当你想在生产模式下构建你的应用程序时，你应该使用webpackproduction shortcut。像这样：

webpack -p

这将使webpack optimize options 能够缩小您的JS。查看webpack标志on this SO answer的更详细解释。

【讨论】：

你有全局安装 Webpack 吗？
我想是的。但是如果有什么东西不起作用，你可以随时提出一个新问题:)

【解决方案4】：

Webpack 插件需要放在module.exports 中的plugins 键下。

https://webpack.github.io/docs/using-plugins.html#built-in-plugins

试试这个：

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

【讨论】：

是的，我就是这个意思。您可能还需要在顶部添加const webpack = require('webpack')。你有什么错误吗？