webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

本文讲的全部知识点,都是和webpack相关的。如果你之前有疑问,那本文一定能帮你搞清楚。

问题来源一般是类似下面代码(webpack.json中):

json 复制代码
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.dev.js"
  },

代码中出现的:cross-envNODE_ENV。还有webpack.config.js中设置的modeDefinePlugin

环境版本(如果是低版本下面也会提及):

  • webpack < v4
  • webpack-dev-server < v4
  • cross-env < v5

编译环境和运行环境

在讲下面之前,我们必须清楚什么是编译环境,什么是运行环境?

  • 编译环境(node环境)

我们在终端执行:npm run devnpm run start 或打包 npm run build 都是在编译环境,也就是node环境。所以webpack的配置文件 webpack.config.jswebpack.dev.jswebpack.production.js 是运行在编译环境中的。

  • 运行环境(浏览器环境)

我们写的业务代码等都是在浏览器中运行的,也就是打包之后我们的代码还在的。

只有区分这两个环境,才能理解下面不同配置方式,有时能读取到,有时读取不到的原因.

概念

mode

模式, webpack会根据mode的值做一些内置优化。

枚举值:none, developmentproduction(默认)。 只能是这三个值中某一个。

配置方式:

  • 方式一(推荐)

在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"
  }
}

这样在macwindows 中就都可以执行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'

总结

  1. mode是设置执行模式,webpack4会自动将mode的值通过DefinePlugin设置为全局变量,业务代码中可以使用process.env.NODE_ENV读取值。
  2. NODE_ENV是设置Node环境变量,在webpack.config.js、webpack.dev.js等文件中通过process.env.NODE_ENV读取值。
  3. cross-env是用来解决跨环境的。
  4. DefinePlugin用来设置全局变量,在业务代码中通过process.env.xxx读取值。