webpack 使用环境变量

在实际的项目开发中，我们经常会根据不同的环境来进行一些配置的调整，比如开发环境和生产环境下的配置可能会有所不同。Webpack 提供了一种方便的方式来处理不同环境下的配置，那就是使用环境变量。

设置环境变量

在 Webpack 中，我们可以通过 process.env.NODE_ENV 来获取当前的环境变量。通常情况下，我们会在 package.json 文件中设置不同的脚本命令来指定环境变量，比如：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --config webpack.config.js",
  "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}

上面的代码中，cross-env 是一个跨平台设置环境变量的工具，使用该工具可以确保在不同操作系统下都能正确设置环境变量。然后我们可以通过 process.env.NODE_ENV 来获取当前的环境变量值。

使用环境变量

根据不同的环境变量值，我们可以在 Webpack 配置文件中进行不同的配置。比如，在开发环境下我们可能需要开启 source map，而在生产环境下则需要进行代码压缩等优化操作。示例代码如下：

-- -------------------- ---- -------
----- ------- - -------------------

-------------- - ----- -- -
  ----- ------------ - ------------ --- -------------

  ------ -
    ----- ------------ - ------------ - --------------
    -------- ------------ - ----- - -------------
    -------- -
      --- ----------------------
        ----------------------- ----------------------------
      --
    -
  --
--

上面的代码中，我们首先通过传入的环境变量值来判断当前的环境是开发环境还是生产环境，然后根据不同的环境设置不同的 mode 和 devtool。同时，我们还可以使用 DefinePlugin 插件来定义全局的环境变量，以便在代码中使用。

总结

通过使用环境变量，我们可以方便地在不同的环境下进行配置，提高项目的灵活性和可维护性。在实际项目开发中，建议根据具体需求来设置不同的环境变量，并在 Webpack 配置文件中进行相应的处理。