首先需要知道我们的代码执行环境是什么
在源代码中的代码在执行的时候是浏览器环境
在webpack.config.js中的代码执行的时候是 node环境
需要知道的是浏览器环境里面是没有process这个变量的,这个process变量只在node环境中才存在。 所以这两个环境中的process 不是同一个东西,源代码中的 process.env.API_URL、process.env等等是我们通过 webpack.DefinePlugin 定义的在代码中的占位符(这里不说全局变量,因为根本就不是变量),这些占位符在代码编译的过程中会被直接替换成 webpack.DefinePlugin 定义的值,这里就涉及到DefinePlugin的具体原理了,不详细说明, 如下:
1 怎么往node环境中添加环境变量
最后在webpack.congfig.js的代码中就可以通过 porocess这个变量访问到 NODE.ENV了
2 怎么在源代码(浏览器环境运行的代码)中使用这些 node环境变量