目标

由于 JavaScript 可以同时用于服务器和浏览器，webpack 提供了多个部署 *目标*，您可以在 webpack 配置 中设置这些目标。

用法

要设置 target 属性，请在 webpack 配置中设置目标值

webpack.config.js

module.exports = {
  target: 'node',
};

在上面的示例中，使用 node webpack 将为在类似 Node.js 的环境中使用进行编译（使用 Node.js require 加载块，并且不触及任何内置模块，例如 fs 或 path）。

每个目标都有各种特定于部署/环境的附加功能，以支持其需求。查看可用的目标。

多个目标

虽然 webpack 不支持将多个字符串传递到 target 属性中，但您可以通过捆绑两个独立的配置来创建同构库。

webpack.config.js

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

const clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js',
  },
  //…
};

module.exports = [serverConfig, clientConfig];

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

资源

从上面的选项可以看出，您可以从多个部署目标中进行选择。以下是一些您可以参考的示例和资源。

• compare-webpack-target-bundles：一个用于测试和查看不同 webpack 目标的绝佳资源。对于错误报告也很有用。
• Electron-React 应用程序的样板：一个用于构建 Electron 主进程和渲染器进程的良好示例。