NODE_ENV和webpack

随笔前端开发中的 NODE_ENV 的知识以及与 webpack 的关系

NODE_ENV

node.js 原生对象 process 的 env 属性是个对象（mac环境）：

而咱们常常在框架以及别人类库的源码中会见到以下使用方法：

process.env.NODE_ENV
复制代码

很显然，NODE_ENV 属性并不在 process.env 对象上，但经过字面意思（node environment）能够知道，这意为 node.js 环境。

用途

express.js 中首次使用该变量，而后推广、普及至整个前端社区。

它的主要用途是：在使用 node.js 环境执行 JavaScript 脚本时，经过这个属性来区分不一样环境（开发、生产、测试等）下的处理（构建、运行等）策略。

它最最最多见的两个值：

process.env.NODE_ENV === 'development'; // 或简写 dev，意为开发环境
process.env.NODE_ENV === 'production'; // 或简写 prod，意为生产环境
复制代码

如何使用

在使用 npm 构建的前端项目根目录下的 package.json 中 scripts 属性是一个对象，它的每个 键名 均可以在命令行（已经安装了 node.js 并将命令添加至环境变量）中经过 npm run 键名 来运行，而真正运行的命令则为 键值：

{
  "scripts": {
    "dev": "webpack --config webpack.dev.config.js"
  }
}
复制代码

$ npm run dev
复制代码

实际运行的命令是 webpack --config webpack.dev.config.js，咱们修改 键值：

{
  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.dev.config.js"
  }
}
复制代码

这样就把 NODE_ENV 属性注入到了 process.env 对象上，而且值为 development，咱们 只能够在 webpack.dev.config.js 脚本中以及它所引入的脚本中访问到 process.env.NODE_ENV，而没法在其它脚本中访问。

在 webpack 中的使用

如今的前端工程使用 webpack 可能是用来构建单页应用，入口脚本文件会以一个树形的结构引用着项目其它脚本文件。

而 webpack 处理的这个入口脚本文件及其引用的脚本文件都没法访问为 webpack.dev.config.js 脚本提供的 process.env.NODE_ENV 属性，可是能够经过 webpack 的插件来让这些脚本文件都能访问到 process.env.NODE_ENV：

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    })
  ]
}
复制代码

最后

谢谢阅读，若有谬误，恳请斧正！