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

在这里插入图片描述

本文讲的全部知识点，都是和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,在代码中使用

new webpack.DefinePlugin({
  PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH),
});

定义之后就可以在代码中使用了：

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读取值。