webpack打包的项目，如何向项目中注入一个全局变量

问题

最近遇到一个问题，就是项目上有时候部署的时候会用到nginx转发，然后nginx转发与不转发时取的一个ws的地址一个是取当前的ip端口，一个是取配置中的ip端口。这种情况本地调试的时候，由于本地是localhost，导致了ws无法成功建立连接，需要做一些特殊处理，在开发环境，将代理的项目的ip端口注入到全局变量中，方便给ws请求时提供正确的路径。

解决方法

使用webpack.DefinePlugin()来解决这个问题。

const proxy = require('../package.json').porxy; // 我是将proxy的代理写在了package.json中，先获取配置的proxy
...
plugins: [
    new webpack.DefinePlugin({
      "PROXY": JSON.stringify(proxy) // 将proxy当做全局变量PROXY注入到项目的上下文环境中，注意这个时候，这个全局变量并不是附加到了window对象上，而是直接的一个全局变量。访问的时候就是直接PROXY就可以访问到该变量
    })
]
...

• 之所以要用JSON.stringfy()包裹起来，是因为如果是单纯的字符串，这个插件就会把该字符串代做代码来解析，它的配置规则如下：

如果这个值是一个字符串，它会被当作一个代码片段来使用

如果这个值不是字符串，它会被转化为字符串(包括函数)。

如果这个值是一个对象，它所有的 key 会被同样的方式定义。

如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

小结

• 这个全局注入大多数时候是用来解决开发环境和线上环境产生不同的行为时会用到，也比较好用。