部署目标(Targets)

因为 JavaScript 可被编写用于服务器和浏览器,所以 webpack 提供了多个可以在 webpack 配置中设置的部署目标。

不应将 webpack 的 target 属性与 output.libraryTarget 属性混淆。 有关 output 属性的更多信息,请参阅 我们的指南

用法

要设置 target 属性,只需在 webpack 配置中设置目标值:

webpack.config.js

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

在上面的示例中,设置目标值为 node ,webpack 将编译为用于类似 Node.js 的环境(使用 Node.js 的 require,而不是用内置模块,如 fs 或 path 来加载 chunk)。

每个目标都有各种部署/环境特定的附加属性,以满足其需求。 查看 可用的目标

[TODO]: 进一步扩展其他流行的 target 值

多个部署目标

虽然 webpack 不支持向 target 属性传递多个字符串,但你可以通过捆绑两个单独的配置来创建一个同构库:

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

资源

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

[TODO]:需要找一些在实际代码或样板中使用的这些 webpack 部署目标的最新示例。