如何将 React 置于生产模式？

Question

我尝试使用此处的解决方案，但该图标仍显示为开发模式。

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

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']
       }
      }
    ]
  }
};

Answer 1

如果要在生产模式下构建应用程序，则应使用webpack 生产快捷方式 。 像这样：

webpack -p

这将使webpack 优化选项能够缩小您的JS。 请参阅此SO答案的webpack标志的更详细说明。

Answer 2

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') }
      }),
   ]
}

Answer 3

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

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

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

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

npm run dev

生产包：

npm run build

Answer 4

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

的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)
    })
  ]
}

它应该是肯定的。

在这里，我有一些配置，您可以尝试优化您的构建。

Answer 5

这对我有用：运行npm run build后跟npm install -g serve和serve -s build