Question

我有一个最简单的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中定义：

＆＃34; build＆＃34;：＆＃34; webpack --config webpack.config.js＆＃34;

如何添加生产插件和devtool：＆＃34; cheap-module-source-map＆＃34;这样它们只能在生产中使用，不包括在开发中。通过生产插件我的意思是：

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 ]

Answer 1

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

作为替代方案，您可以将dev配置复制到名为webpack-prod.config.js的文件中，并在那里添加您的生产资料。然后使用"build": "webpack --config webpack-prod.config.js"

运行它

Answer 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;

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

2 个答案: