目标

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

用法

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

webpack.config.js

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

在上述示例中，使用 node webpack 将会为 Node.js 类似环境编译（使用 Node.js 的 require 来加载 chunks，并且不触及任何内置模块，例如 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 目标的极佳资源。也适合用于报告 Bug。
• Boilerplate of Electron-React Application：一个很好的 Electron 主进程和渲染器进程构建过程示例。