1. 写在前面
我们在做项目的过程中，可能会需要预先定义一些项目全局变量，比如项目的名称、项目的本地端口、项目的API地址等。也会定义一些环境变量，比如当前是开发模式还是生产模式等。
对于这些变量，我们当前可以在项目中进行定义，但是我认为这不是最好的一种解决方案，最好的实践方式是在webpack的配置文件中定义这些变量，然后我们就可以直接在项目中使用这些变量。
2. 定义全局变量和环境变量
在webpack的配置文件中配置全局变量和环境变量，需要使用到一个插件，即 DefinePlugin 。这是webpack自带的插件，所以我们不用安装，可以直接使用。使用方式如下：
比如我们要在webpack的配置文件中，定义项目的名称为 "Allen APP"，项目的API地址为 "www.fengzhen8023.com"，那么可以在 webpack.config.js 中添加如下代码：
let webpack = require("webpack");
module.exports = {
plugins: [
new webpack.DefinePlugin({
APP_NAME: JSON.stringify("Allen App"),
API_SERVER: JSON.stringify("www.fengzhen8023.com")
})
]
}
这里将其他的配置规则省略了，如果你想看其他的配置规则，可以查看我的 GitHub仓库 - webpack-learning ,或者通过本文末尾的链接，跳转到我之前的博客中进行查看。
在webpack配置文件中成功定义全局变量之后，在项目的其他代码文件中，无需导入这些变量，就可以直接使用，比如可以直接把这些变量打印出来：
// 项目中的index.js文件
console.log("APP_NAME: ", APP_NAME);
console.log("API_SERVER: ", API_SERVER);
3. 定义变量时候的规则说明
在webpack配置文件中定义全局变量的时候，你可能会想：我定义的变量基本都是字符串类型，所以可以使用以下代码进行定义：
module.exports = {
plugins: [
new webpack.DefinePlugin({
APP_NAME: "Allen App",
API_SERVER: "www.fengzhen8023.com"
})
]
}
如果使用上述代码进行配置，在启动项目的时候会遇到报错。这里我们虽然使用双引号的形式把 "Allen App" 赋值给APP_NAME，但是webpack在配置的时候，会忽略双引号，直接把 Allen App 赋值给APP_NAME，但是 Allen App 没有定义，所以就会报错。
如果我们想要使用字符串来定义全局变量的时候，可以借助 JSON.stringify() 这个函数，因为这个函数返回的结果是一个字符串，符合我们的预期。
不过这里倒是给我们一个启发，如果你想要使用表达式的形式定义全局变量，或者是想要给全局变量赋值一个布尔类型的值，那么可以使用以下配置规则：
module.exports = {
plugins: [
new webpack.DefinePlugin({
EXPRESSION: "1+1",
BOOLEAN: "true"
})
]
}
这样配置完成之后，在项目文件中打印这两个全局变量，结果如下：
// 项目中的index.js文件
console.log("EXPRESSION: ", EXPRESSION); // 结果为数值类型的值： 2
console.log("API_SERVER: ", API_SERVER); // 结果为布尔类型的值： true
4. 关于使用全局变量的报错说明
如果你在项目中使用 eslint 来校验代码，那么使用全局变量的时候，可能会编译报错，比如以下报错信息：
这也算是eslint和webpack.DefinePlugin插件的一个冲突，要解决这个问题，可以在使用全局变量的过程中，添加一行注释，来告诉eslint，这里的代码不用进行 未定义检测 ，代码如下：
/* eslint-disable no-undef */
console.log("EXPRESSION: ", EXPRESSION);
console.log("BOOLEAN: ", BOOLEAN);
如此一来，报错的问题就解决了。
