本文讲的全部知识点,都是和webpack相关的。如果你之前有疑问,那本文一定能帮你搞清楚。
问题来源一般是类似下面代码(webpack.json中):
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)中设置:
javascript
module.exports = {
mode: 'development'
};
- 方式二
package.json中,webpack的CLI命令参数:
json
webpack serve --mode=development
这两种方式设置的mode值,只能在业务代码(运行环境)中通过process.env.NODE_ENV读取到;在编译环境,webpack配置文件中是读取不到的。
注意:
在 webpack 4+ 中,你不需要做任何设置(其实是webpack自动帮你把变量加到了DefinePlugin中)就可以在代码中读取process.env.NODE_ENV的值了。
但是在 webpack 3 及其更低版本中,你需要在webpack配置文件中使用 DefinePlugin设置成全局变量,才可以访问得到:
javascript
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中:
json
{
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
}
}
你如果是mac电脑执行npm run dev是能正常运行的,但如果你是windows电脑,会报错:
bash
'NODE_ENV' 不是内部或外部命令,也不是可运行的程序或批处理文件。
是的,在windows里面需要修改命令为:
json
{
"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
为解决跨环境问题。
安装:
bash
npm install cross-env@5
修改package.json中命令:
json
{
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
}
}
这样在mac 和windows 中就都可以执行npm run dev了。
DefinePlugin
上面在讲mode
时已经提到了DefinePlugin
,它主要用来定义一些全局变量,并会在 编译时 将你代码中的全局变量替换为具体值。这在需要根据开发模式与生产模式进行不同的操作时,非常有用。
javascript
new webpack.DefinePlugin({
// 定义...
});
使用
传递给 DefinePlugin
的每个键都是一个标识符或多个以 .
连接的标识符。
- 如果该值为字符串,它将被作为代码片段来使用。
- 如果该值不是字符串,则将被转换成字符串(包括函数方法)。
- 如果值是一个对象,则它所有的键将使用相同方法定义。
- 如果键添加
typeof
作为前缀,它会被定义为 typeof 调用。
这些值将内联到代码中,从而允许通过代码压缩来删除冗余的条件判断。
javascript
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});
提示:
请注意,由于本插件会直接替换文本,因此提供的值必须在字符串本身中再包含一个 实际的引号 。通常,可以使用类似 '"production"'
这样的替换引号,或者直接用 JSON.stringify('production')
。
javascript
if (!PRODUCTION) {
console.log('Debug info');
}
if (PRODUCTION) {
console.log('Production log');
}
未经 webpack 压缩过的代码:
javascript
if (!true) {
console.log('Debug info');
}
if (true) {
console.log('Production log');
}
经过压缩后:
javascript
console.log('Production log');
cross-env + DefinePlugin
确切的讲,使用cross-env可以定义任意Node全局环境变量,例如package.json中:
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,在代码中使用
javascript
new webpack.DefinePlugin({
PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH),
});
定义之后就可以在代码中使用了:
javascript
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读取值。