Targets（目标环境）¹

由于JavaScript可以为服务器和浏览器编写，webpack提供了多个部署targets，你可以在webpack配置里面设置。

⚠️不要混淆webpack的target属性和output.libraryTarget属性。查阅指引获取更多output属性的信息。

用法

要设置target属性，你只需要在webpack配置里面设置target的值：

webpack.config.js

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

在上面的例子中，使用node值，webpack将会按照类Node.js环境进行编译（使用Node.js require来加载分块，不使用内置模块比如fs或path）。

每个target都有多个部署/环境相关的附加值、支持来满足需求。查看哪些可用的targets。

[TODO] 为其他流行的target值展开更多讨论。

多个targets

虽然webpack不支持向taget属性传递多个字符串，你可以通过打包两个不同的配置来创建同构（isomorphic）库。

webpack.config.js

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

var 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文件。

资源

从上面的选项可以看到，你能选择多个不同的部署targets。下面是一些你可以参考的样例和资源。

打包输出比较

compare-webpack-target-bundles：一个不错的测试和查看不同webpack targets的工具。欢迎报告bug。

[TODO] 需要在实际代码或样板中找到使用这些webpack targets的最新样例。

¹. https://webpack.js.org/concepts/targets/ ↩