WebPack 构建目标

因为服务器和浏览器都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack配置中设置。

webpack 的 target 不要和 output.libraryTarget 混淆。有关 output 的更多信息，请查看我们的指南。

要设置 target ，只需要在你的 webpack 配置中设置 target 的值。

webpack.con.js

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

在上面例子中，使用 node webpack 会编译为用于「类 Node.js」环境（使用 Node.js 的 require ，而不是使用任意内置模块（如 fs 或 path）来加载 chunk）。

每个target都有各种部署(deployment)/环境(environment)特定的附加项，以满足其需求。查看target 的可用值。

Further expansion for other popular target values

多个 Target

尽管 webpack 向 target 传入多个字符串，你可以通过打包两份分离的配置来创建同构的库：

webpack.con.js

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

var clientCon = {
  target: 'web', // <=== 认是 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverCon, clientCon ];

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

资源

从上面的选项可以看出有多个不同的部署_目标_可供选择。下面是示例列表，以及你可以参考的资源。

：有关「测试和查看」不同的 webpack target 的大量资源。也有大量 bug 报告。

： electron 主进程和渲染进程构建过程的很好的例子。

需要找到这些webpack目标在实时或样板中使用的最新示例。