配置概念

title: 配置概念
sort: 5
contributors:

• TheLarkInn
• simon04
• EugeneHlushko
• byzyk
• mr-baraiya

你可能已经注意到，几乎没有任何两份 webpack 配置是完全相同的。这是因为 webpack 的配置文件是一个导出 webpack 配置 的 JavaScript 文件。 webpack 会根据该文件定义的属性来处理这份配置。

由于它是一个标准的 Node.js 模块，你可以做到以下几点：

• 通过 require(...) 或 import 导入其他文件
• 通过 require(...) 或 import 使用 npm 上的工具
• 使用 JavaScript 控制流表达式（例如 ?:、if、for 等）
• 对经常使用的值使用常量或变量
• 编写并执行函数来生成配置的一部分

在适当时使用这些特性。

虽然它们在技术上可行，但应避免以下做法：

• 在使用 webpack CLI 时访问 CLI 参数。这会使你的配置不可移植，并且难以维护。相反，编写你自己的 CLI，或 使用 --env 传递环境变量。
• 导出不确定的值（调用 webpack 两次应生成相同的输出文件）
• 编写冗长的配置（而应将配置拆分为多个文件）

提示： 本文最重要的一点是，webpack 配置有多种不同的格式和样式。关键是坚持使用一种你和你的团队都能理解和维护的一致性风格。

下面的示例说明了 webpack 配置如何既富有表现力又可配置，因为 它本身就是代码：

入门配置

webpack.config.js

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

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

export default {
  mode: "development",
  entry: "./foo.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "foo.bundle.js",
  },
};

参见：配置部分，了解所有受支持的配置选项

使用多个配置

webpack 支持导出多个配置对象，这在构建不同目标或输出时非常有用（例如，分离的客户端和服务端 bundle）。

虽然对于许多项目来说，单个配置已经足够，但多个配置有助于组织更复杂的设置。

module.exports = [
  {
    entry: "./src/client.js",
    output: {
      filename: "client.bundle.js",
    },
  },
  {
    entry: "./src/server.js",
    output: {
      filename: "server.bundle.js",
    },
  },
];

多目标

除了将单个配置作为对象、函数 或 Promise 导出之外，你还可以导出多个配置。

参见：导出多个配置

使用其他配置语言

webpack 接受以多种编程语言和数据语言编写的配置文件。

参见：配置语言