title: Passing the NODE_ENV value using Webpack via DefinePlugin
body: <p>I am trying to inject the <code>NODE_ENV</code> value into my code using <code>webpack</code> via <code>DefinePlugin</code>. I checked, more or less, an <a href="https://stackoverflow.com/questions/34479372/use-node-env-in-source-code-to-control-build-process-with-webpack/34480055?noredirect=1#comment70581497_34480055">identical question</a>, but still can't get it to work.</p>
  
  <p>Specifically, here's my setup.</p>
  
  <p>In <code>package.json</code>:</p>
  
  <pre><code>"scripts": {
      "build": "rimraf dist &amp;&amp; cross-env NODE_ENV=production webpack",
      "dev": "cross-env NODE_ENV=development &amp;&amp; node webpack-dev-server.js"
  },
  </code></pre>
  
  <p>In <code>webpack.config.js</code>:</p>
  
  <pre><code>"use strict";
  
  /* requiring the modules */
  const webpack = require("webpack");
  const path = require("path");
  
  /* defining the source and distribution paths */
  const DIST_DIR = path.resolve(__dirname, "dist");
  const SRC_DIR = path.resolve(__dirname, "src");
  
  const DEVELOPMENT = process.env.NODE_ENV === "development";
  const PRODUCTION = process.env.NODE_ENV === "production";
  // const PRODUCTION = !!process.argv.find((element) =&gt; element === '--production');
  // const DEVELOPMENT = !!process.argv.find((element) =&gt; element === '--development');
  
  
  /* defining the entries*/
  const productionEntries = {
      home: SRC_DIR + "/_home.js",
      about: SRC_DIR + "/_about.js",
  };
  const developmentEntries = Object.assign({}, productionEntries, {webpackDevServer: ["webpack/hot/dev-server", "webpack-dev-server/client?http://localhost:8080"]});
  const entries = PRODUCTION ? productionEntries : developmentEntries;
  
  
  /* defining the output */
  const output = {
      filename: "[name].js",
      path: DIST_DIR,
      publicPath: "/dist/",
      pathinfo: true,
      library: "MyLibraryName"
  };
  
  
  /* defining the plugins */
  const plugins = PRODUCTION
      ? [
          new webpack.optimize.OccurrenceOrderPlugin(),
          new webpack.optimize.AggressiveMergingPlugin(),
          new webpack.optimize.UglifyJsPlugin({comments: false}),
      ]
      :  [
          new webpack.HotModuleReplacementPlugin(),
      ];
  
  plugins.push(
      new webpack.optimize.CommonsChunkPlugin({name: "vendor.bundle", minChunks: 2}),
      new webpack.DefinePlugin({
          PRODUCTION: PRODUCTION,
          DEVELOPMENT: DEVELOPMENT,
      })
  );
  
  
  /* defining the modules -&gt; rules -&gt; loaders */
  const modules = {
      rules:
          [
              {
                  test: /\.(js|jsx)$/,
                  include: SRC_DIR,
                  exclude: /node_modules/,
                  loader: "babel-loader",
                  options:
                      {
                          presets: ["react", ["es2015", {modules: false}], "stage-2"]
                      }
              }
          ]
  };
  
  
  
  /* building the webpack config object */
  const config = {
      entry: entries,
      output: output,
      module: modules,
      plugins: plugins,
      devtool: "source-map",
      target: "web",
      stats: "verbose"
  };
  
  /* exporting the webpack config */
  module.exports = config;
  </code></pre>
  
  <p>And, finally, in <code>_about.js</code> I have the following:</p>
  
  <pre><code>// output after using: npm run dev
  console.log(process.env.NODE_ENV); // prints undefined
  console.log(PRODUCTION); // prints false
  console.log(DEVELOPMENT); // prints false
  
  if (module.hot) {
      module.hot.accept();
  }
  </code></pre>
  
  <p><strong>The problem</strong>:</p>
  
  <ul>
  <li>since <code>npm run dev</code> runs successfully (i.e., the server starts and the plugins and entries are adequtlly selected), I don't understand why the output for <code>console.log(DEVELOPMENT)</code> is <code>false</code>, and why <code>console.log(process.env.NODE_ENV)</code> prints <code>undefined</code>. </li>
  <li>in the conditional checks performed inside the <code>webpack.config.js</code>, the <code>NODE_ENV</code> value is picked properly, otherwise the the plugins, entries, and the development server wouldn't work. However, I can't pass that value down to <code>_about.js</code> using <code>DefinePlugin</code>.</li>
  <li>I also tried <code>EnvironmentPlugin</code>, same result.</li>
  </ul>
  
  <p><strong>My question</strong>: Can you, please, help me <em>understand</em> where things break?</p>
  
  <hr>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>I tried the following without any improvements:</p>
  
  <pre><code>new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(PRODUCTION),
      DEVELOPMENT: JSON.stringify(DEVELOPMENT)
  })
  </code></pre>
  
  <p>I am running <code>node.js</code> on <code>Windows 10</code>.</p>
  
  <hr>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>Tried:</p>
  
  <pre><code>const DEVELOPMENT = process.env.NODE_ENV === "development";
  const PRODUCTION = process.env.NODE_ENV === "production";
  
  // with this inside plugins:
  new webpack.DefinePlugin({
      "process.env.PRODUCTION": JSON.stringify(PRODUCTION),
      "process.env.DEVELOPMENT": JSON.stringify(DEVELOPMENT)
  })
  </code></pre>
  
  <p>and (using <code>npm run dev</code>) I get the following output:</p>
  
  <pre><code>console.log(process.env.PRODUCTION); // false
  console.log(process.env.DEVELOPMENT); // false
  console.log(process.env.NODE_ENV); // undefined
  console.log(PRODUCTION); // Uncaught ReferenceError: PRODUCTION is not defined
  console.log(DEVELOPMENT); // Uncaught ReferenceError: DEVELOPMENT is not defined
  </code></pre>
  
  <p>No improvements unfortunately.</p>
  
  <hr>
  
  <p><strong>Edit 3:</strong></p>
  
  <p>My <code>devDependencies</code> are:</p>
  
  <pre><code>"devDependencies": {
      "babel-core": "^6.21.0",
      "babel-loader": "^6.2.10",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "babel-preset-stage-2": "^6.18.0",
      "cross-env": "^3.1.4",
      "rimraf": "^2.5.4",
      "webpack": "^2.2.0-rc.4",
      "webpack-dev-server": "^2.2.0-rc.0"
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Edit 4: (solved)</strong></p>
  
  <p>@Cleiton spotted the issue. It had to do with the how the <code>npm</code> scripts are constructed using <code>cross-env</code>. See the complete answer below.</p>