Webpack使用心得——变量注入

2019独角兽企业重金招聘Python工程师标准>>>

应用场景：开发环境api地址：test.api.ctrip.com，生产环境api地址：api.ctrip.com，我们需要根据不同的环境来修改不同的地址，手动维护很麻烦，于是有人想到了通过Node注入一些参数（process.env.NODE_ENV=production）来表明此时是生产环境，这种判断机制在NodeJS的程序中可以直接使用，但是前端是不能直接获取process这个变量的？这个时候，webpack的一款插件可以帮助我们完美解决这样的烦恼，它就是：DefinePlugin

关于在webpack中如何使用插件，在这里就不赘述了，下面只介绍DefinePlugin插件的相关api：

1、定义：

new webpack.DefinePlugin({
  // 传入配置项
})

2、配置项：

2.1、关于配置项的官方文档说明：

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。

• 如果这个值是一个字符串，它会被当作一个代码片段来使用。
• 如果这个值不是字符串，它会被转化为字符串(包括函数)。
• 如果这个值是一个对象，它所有的 key 会被同样的方式定义。
• 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

这些值会被内联进那些允许传一个代码压缩参数的代码中，从而减少冗余的条件判断。

2.2、举例说明：

a、"process.env":"'product'"这段代码可以让我们在前端直接使用：process.env，并且值为'product'

注意：这里"'product'"的写法不能把里面的引号丢了，如果丢了，会当成product变量来处理，有了就当成'product'字符串来处理

 

转载于:https://my.oschina.net/chengxiancheng/blog/1585941