将生产添加到开发 React Webpack 配置中答案

【问题标题】：Add production into development React Webpack config将生产添加到开发 React Webpack 配置中
【发布时间】：2018-04-29 01:33:24
【问题描述】：

我有一个最简单的 React 环境。这在开发中非常有效。

var webpack = require('webpack');

const config = {
  entry: "./index.js",
  output: { filename: "bundle.js" },
  devtool: 'eval',
module: {
   loaders: [
    {  test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'env'] }  }
   ]
  }
};

module.exports = config;

我想要做的是添加一个生产构建以便在控制台脚本中运行，如下所示：npm run build，它在 package.json 中定义：

"build": "webpack --config webpack.config.js"

如何添加生产插件和 devtool: "cheap-module-source-map" 以便它们仅在生产中工作而不包含在开发中。我所说的生产插件是指这些：

new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
new webpack.optimize.UglifyJsPlugin()

我没有使用

var debug = process.env.NODE_ENV !== "production";

devtool: debug ? "cheap-module-source-map" : "eval", 和

plugins: debug ? [] : [//production plugins here ]

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

听起来您在环境变量方面遇到了问题，这绝对是要走的路。如果您发布更多详细信息，我可以帮助找出问题。

作为替代方案，您可以将您的开发配置复制到一个名为 webpack-prod.config.js 的文件中，并在那里添加您的生产内容。然后使用"build": "webpack --config webpack-prod.config.js"运行它

【讨论】：

【解决方案2】：

通常的做法是为生产配置创建一个单独的文件并在其中更改属性。

webpack.config.production.js：

var webpack = require('webpack');
var config = require('./webpack.config');

config.devtool = 'cheap-module-source-map';
config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({ 
        'process.env.NODE_ENV': JSON.stringify('production') 
    }),
    new webpack.optimize.UglifyJsPlugin()
]);

module.exports = config;

【讨论】：