Webpack 设置环境变量的误区：跨越浏览器与 Node 的鸿沟

2023-11-14 03:35:47

众所周知，Webpack 是一款现代化的 JavaScript 构建工具，它可以帮助我们管理项目中各种资产，包括 JavaScript、CSS、图片等。在使用 Webpack 的过程中，我们经常需要设置一些环境变量，以便让我们的代码能够在不同的环境（例如开发环境、生产环境）中正常运行。

设置环境变量的常规做法是直接在项目的配置文件中进行设置。不过，这种做法存在一个问题：它只能够设置全局的环境变量，而无法设置特定模块的环境变量。为了解决这个问题，我们可以使用跨平台环境变量工具 cross-env 和 Webpack 插件 webpack.DefinePlugin。

cross-env 是一款跨平台的环境变量工具，它可以帮助我们设置环境变量，并将其注入到进程中。webpack.DefinePlugin 是一款 Webpack 插件，它可以帮助我们设置模块的环境变量。通过将 cross-env 和 webpack.DefinePlugin 配合使用，我们可以非常方便地在 Webpack 项目中设置环境变量。

然而，在实际使用中，我发现了一种误区。这个误区就是：我们以为可以使用 cross-env 和 webpack.DefinePlugin 来设置所有环境（浏览器环境、Node 环境）下的变量。经过测试，我发现这个想法是错误的。cross-env 和 webpack.DefinePlugin 只能够设置 Node 环境下的变量，而无法设置浏览器环境下的变量。

如果我们要设置浏览器环境下的变量，就需要用到其他方法。我们可以通过在 HTML 文件中添加 meta 标签来设置浏览器环境下的变量。具体做法如下：

<meta name="env" content="development">

如果我们要设置 Node 环境下的变量，就需要用到 cross-env 和 webpack.DefinePlugin。具体做法如下：

1. 安装 cross-env 和 webpack.DefinePlugin

npm install cross-env webpack.define-plugin --save-dev

2. 在项目根目录下创建 .env 文件

NODE_ENV=development

3. 在 webpack 配置文件中添加 cross-env 和 webpack.DefinePlugin

const webpack = require('webpack');
const dotenv = require('dotenv');

const env = dotenv.config().parsed;

module.exports = {
  // ... 其他配置项
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env,
    }),
  ],
};