Webpack 配置环境变量，轻松避开坑！

2023-11-01 19:43:44

在前端开发中，Webpack 是一个非常流行的模块打包工具。它可以帮助我们把项目中的各种资源，如 JavaScript、CSS、图片等，打包成一个或多个文件，以便浏览器能够加载和执行。

在 Webpack 的配置文件中，我们可以使用环境变量来区分不同的开发环境。例如，我们可以定义一个名为 NODE_ENV 的环境变量，并在不同的环境中设置不同的值。在开发环境中，我们可以将 NODE_ENV 设置为 development，而在生产环境中，我们可以将 NODE_ENV 设置为 production。

通过使用环境变量，我们可以根据不同的环境加载不同的配置文件。例如，我们可以创建一个名为 webpack.config.js 的配置文件，并在其中根据 NODE_ENV 的值来加载不同的配置。

const webpack = require('webpack');

module.exports = (env, argv) => {
  const NODE_ENV = argv.mode || 'development';

  if (NODE_ENV === 'development') {
    // 开发环境配置
    return {
      // ...
    };
  } else if (NODE_ENV === 'production') {
    // 生产环境配置
    return {
      // ...
    };
  } else {
    // 测试环境配置
    return {
      // ...
    };
  }
};