构建目标（Target）

title: 构建目标（Target）
sort: 10
contributors:

• TheLarkInn
• rouzbeh84
• johnstew
• srilman
• byzyk
• EugeneHlushko

因为 JavaScript 既可以用于服务器端，也可以用于浏览器端，webpack 提供了多种部署_目标_（targets），你可以在 webpack 配置中进行设置。

注意：webpack 的 target 属性不要与 output.libraryTarget 属性混淆。更多信息请参阅关于 output 属性的指南。

用法

要设置 target 属性，在 webpack 配置中设置 target 值即可：

webpack.config.js

export default {
  target: "node",
};

在上面的例子中，使用 node，webpack 将针对 Node.js 类似环境进行编译（使用 Node.js 的 require 加载 chunk，并且不触碰 fs 或 path 等内置模块）。

每个_目标_都有各种部署/环境特定的添加和支持，以满足其需求。查看可用的 targets。

更多其他常用 target 值的扩展

多个 Targets

webpack 支持向 target 属性传入字符串数组，在这种情况下会使用它们特性的公共子集。这让你可以构建在多种环境中运行的通用代码——例如，组合 web 和 node：

webpack.config.js

export default {
  target: ["web", "node"],
};

或者，你可以通过打包两个独立的配置来创建一个同构（isomorphic）库：

webpack.config.js

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

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

const serverConfig = {
  target: "node",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "lib.node.js",
  },
  // …
};

const clientConfig = {
  target: "web", // <=== 可省略，默认值即 'web'
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "lib.js",
  },
  // …
};

export default [serverConfig, clientConfig];

上面的例子将在你的 dist 文件夹中创建 lib.js 和 lib.node.js 文件。

资源

从上面的选项中可以看出，有多种部署_目标_可供选择。下面是一些可以参考的示例和资源列表。

• compare-webpack-target-bundles：一个用于测试和查看不同 webpack targets 的绝佳资源，也适合用于报告 bug。
• Electron-React Application Boilerplate：一个很好的 electron 主进程和渲染进程构建流程示例。

需要找到这些 webpack targets 在真实代码或 boilerplates 中的最新示例。