无法使用webpack将NODE_ENV设置为生产

时间:2017-03-26 03:46:59

标签: javascript node.js reactjs webpack

我正在使用webpack 2.2.1为生产构建react-redux应用,但似乎无法将process.env.NODE_ENV设置为production

这是webpack.config.js:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

const VENDOR_LIBS = [
  'axios', 'lodash', 'react', 'react-dom', 'react-redux',
  'react-router', 'redux', 'redux-form', 'redux-thunk'
];

module.exports = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

这是我在package.json中的脚本:

"scripts": {
   "clean": "rimraf dist",
    "build": "NODE_ENV=production npm run clean && webpack -p",
    "serve": "webpack-dev-server"
}

当我运行npm run build时,我的bundle.js已编译但不适合生产。在我的webpack.config.js中,我将DefinePlugin的选项替换为'process.env.NODE_ENV': '"production"'并且它有效。所以我认为我的package.json文件有问题,但我无法弄清楚它是什么。

1 个答案:

答案 0 :(得分:8)

您正在使用构建命令npm run cleanwebpack -p运行两个进程。在前面添加NODE_ENV=production时,它仅适用于当前进程。在您的示例NODE_ENV=production npm run clean && webpack -p中,只有clean命令与set环境变量一起运行。

当您添加export NODE_ENV=production时,它会为您从该终端启动的所有进程设置它。请记住这一点,因为您从同一个终端窗口运行的所有其他内容都将设置NODE_ENV=production

$ npm run build
> NODE_ENV=production npm run clean && webpack -p
...
$ echo $NODE_ENV
production

如果您不希望NODE_ENV=production坚持其他流程,请在两个流程前添加NODE_ENV=production

NODE_ENV=production npm run clean && NODE_ENV=production webpack -p