如何将React置于生产模式?

时间:2017-12-20 19:05:58

标签: javascript reactjs

我尝试使用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']
       }
      }
    ]
  }
};

4 个答案:

答案 0 :(得分:2)

如果您想在生产模式下构建应用,则应使用webpack production shortcut。像这样:

webpack -p

这将使webpack optimize options缩小您的JS。查看webpack标志on this SO answer的详细说明。

答案 1 :(得分:1)

Webpack插件需要放在spark-default.conf的{​​{1}}键下。

Sample

试试这个:

plugins

答案 2 :(得分:1)

如果您使用Webpack 4,则无需更改package.json。它在开发和生产模式中都保持不变。

唯一需要的是"scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }

npm run dev

有了这个,创建一个开发包:

npm run build

生产包:

{{1}}

答案 3 :(得分:0)

有同样的错误,所以要解决它我做了这个:

<强>的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我有一些配置可以尝试优化您的构建。