环境变量

webpackjsorg-main指南-教程

环境变量

要在 webpack.config.js 中区分开发构建和生产构建，你可以使用环境变量。

提示： webpack 的环境变量与 bash 和 CMD.exe 等操作系统 shell 的环境变量不同。

webpack 命令行环境选项 --env 允许你传入任意数量的环境变量。环境变量将在你的 webpack.config.js 中可访问。例如，--env production 或 --env goal=local。

bash 复制代码

npx webpack --env goal=local --env production --progress

提示： 设置不带赋值的 env 变量时，--env production 默认会将 env.production 设置为 true。你还可以使用其他语法。有关更多信息，请参阅 webpack CLI 文档。

你需要对 webpack 配置做一处更改。通常，export default 指向配置对象。要使用 env 变量，你必须让 export default 成为一个函数：

webpack.config.js

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log("Goal:", env.goal); // 'local'
  console.log("Production:", env.production); // true

  return {
    entry: "./src/index.js",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist"),
    },
  };
};

提示： Webpack CLI 提供了一些内置环境变量，你可以在 webpack 配置中访问它们。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。