本文讲的全部知识点，都是和webpack相关的。如果你之前有疑问，那本文一定能帮你搞清楚。
问题来源一般是类似下面代码（webpack.json中）：
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.dev.js"
},
代码中出现的：cross-env、NODE_ENV。还有webpack.config.js中设置的mode、DefinePlugin。
环境版本（如果是低版本下面也会提及）：
- webpack < v4
- webpack-dev-server < v4
- cross-env < v5
编译环境和运行环境
在讲下面之前，我们必须清楚什么是编译环境，什么是运行环境？
- 编译环境（node环境）
我们在终端执行：npm run dev 或 npm run start 或打包 npm run build 都是在编译环境，也就是node环境。所以webpack的配置文件 webpack.config.js 和 webpack.dev.js 和 webpack.production.js 是运行在编译环境中的。
- 运行环境（浏览器环境）
我们写的业务代码等都是在浏览器中运行的，也就是打包之后我们的代码还在的。
只有区分这两个环境，才能理解下面不同配置方式，有时能读取到，有时读取不到的原因.
概念
mode
模式， webpack会根据mode的值做一些内置优化。
枚举值：none, development 或 production（默认）。 只能是这三个值中某一个。
配置方式：
- 方式一（推荐）
在webpack配置文件（webpack.config.js、webpack.develop.js、webpack.production.js）中设置：
module.exports = {
mode: 'development'
};
- 方式二
package.json中，webpack的CLI命令参数：
webpack serve --mode=development
这两种方式设置的mode值，只能在业务代码（运行环境）中通过process.env.NODE_ENV读取到；在编译环境，webpack配置文件中是读取不到的。
注意:
在 webpack 4+ 中,你不需要做任何设置（其实是webpack自动帮你把变量加到了DefinePlugin中）就可以在代码中读取process.env.NODE_ENV的值了。
但是在 webpack 3 及其更低版本中，你需要在webpack配置文件中使用 DefinePlugin设置成全局变量，才可以访问得到：
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
NODE_ENV
上面我们设置mode，是在运行环境中使用；如果想在编译环境（webpack配置文件中使用）就需要用到NODE_ENV了。
本质就是给当前Node进程，设置一个环境变量。只有在当前Node进程中有效。
设置方式：
package.json中：
{
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
}
}
你如果是mac电脑执行npm run dev是能正常运行的，但如果你是windows电脑，会报错：
'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件。
是的，在windows里面需要修改命令为：
{
"scripts": {
"dev": "set NODE_ENV=development && webpack-dev-server --config ./config/webpack.config.dev.js"
}
}
要解决跨环境问题，就要用到下面的cross-env了,我们一会在讲，还是先回来。
设置了NODE_ENV=development后，在哪使用，如何使用呢？
答案：只能在编译环境（webpack的配置文件webpack.config.js等）中使用。可以通过**process.env.NODE_ENV读取。**在业务代码中是无法读取的。
cross-env
为解决跨环境问题。
安装：
npm install cross-env@5
修改package.json中命令：
{
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
}
}
这样在mac和windows中就都可以执行npm run dev了。
DefinePlugin
上面在讲mode时已经提到了DefinePlugin ，它主要用来定义一些全局变量，并会在 编译时 将你代码中的全局变量替换为具体值。这在需要根据开发模式与生产模式进行不同的操作时，非常有用。
new webpack.DefinePlugin({
// 定义...
});
使用
传递给 DefinePlugin 的每个键都是一个标识符或多个以 . 连接的标识符。
- 如果该值为字符串，它将被作为代码片段来使用。
- 如果该值不是字符串，则将被转换成字符串（包括函数方法）。
- 如果值是一个对象，则它所有的键将使用相同方法定义。
- 如果键添加
typeof作为前缀，它会被定义为 typeof 调用。
这些值将内联到代码中，从而允许通过代码压缩来删除冗余的条件判断。
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});
提示:
请注意，由于本插件会直接替换文本，因此提供的值必须在字符串本身中再包含一个 实际的引号 。通常，可以使用类似 '"production"' 这样的替换引号，或者直接用 JSON.stringify('production')。
if (!PRODUCTION) {
console.log('Debug info');
}
if (PRODUCTION) {
console.log('Production log');
}
未经 webpack 压缩过的代码：
if (!true) {
console.log('Debug info');
}
if (true) {
console.log('Production log');
}
经过压缩后：
console.log('Production log');
cross-env + DefinePlugin
确切的讲，使用cross-env可以定义任意Node全局环境变量，例如package.json中：
{
"scripts": {
"dev": "cross-env NODE_ENV=development PUBLIC_PATH=/ui webpack-dev-server --config webpack.dev.config.js"
}
}
我们这里又新增了一个全局变量PUBLIC_PATH，用来设置URL基础路径。
在编译环境（webpack.config.js）中，可以直接使用process.env.PUBLIC_PATH获取。
并可以通过添加到DefinePlugin,在代码中使用文章来源：https://www.toymoban.com/news/detail-860100.html
new webpack.DefinePlugin({
PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH),
});
定义之后就可以在代码中使用了：文章来源地址https://www.toymoban.com/news/detail-860100.html
const url = PUBLIC_PATH + '/views'
console.log(url); // =>'/ui/views'
总结
-
mode是设置执行模式，webpack4会自动将mode的值通过DefinePlugin设置为全局变量，业务代码中可以使用process.env.NODE_ENV读取值。 -
NODE_ENV是设置Node环境变量，在webpack.config.js、webpack.dev.js等文件中通过process.env.NODE_ENV读取值。 -
cross-env是用来解决跨环境的。 -
DefinePlugin用来设置全局变量，在业务代码中通过process.env.xxx读取值。
到了这里，关于webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![在vite或者vue-cli中使用.env[mode]环境变量](https://imgs.yssmx.com/Uploads/2024/02/459254-1.png)
