如何用webpack定义环境变量以便在代码中区分

在不同的环境下，我们需要制定不同的配置。比如编译到生产环境，我们会指定生产环境的配置，通常我们会用process.env.NODE_ENV为production。浏览器中是没有process这个变量，是无法直接访问的。有时我们会在前端代码逻辑需要知道当前是什么环境。如果是生产环境，我们就调用生产环境相关的url，否则调用qa环境的。之前唯一的办法是在编译的时候，手动设定一个全局的参数，在开发环境的时候，再手动设定另外一个。这样子很容易因为人工疏忽导致出错。比如明明编译到了生产环境，但是因为参数忘了手动改，所以浏览器读取到的是qa环境。
为了避免这种低级的错误，webpack有个插件可以直接设定和process.env.NODE_ENV的值。插件是webapck.definePlugin
调用方法

new webpack.DefinePlugin({
      'process.env': 'pro'
    })

然后在前端代码中这样调用。

console.log("process.env", process.env)

代码部署后，页面执行到该处就会打印出pro值。但是如果你在浏览器控制台访问process.env，仍然访问不到。
我分析了一下，原来是在编译到时候，就把process.env整体替换为'pro'值了。