构建目标 | Targets

构建目标（Targets）

千万不要把webpack中的target属性和output.libraryTarget 属性进行混淆。有关这方面的知识可以参见本档案中output属性一章中的介绍。

用法

要设置目标属性，只需在webpack config中设置目标值：

webpack.config.js

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

进一步扩大其他受欢迎的目标价值

多个目标

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 ];

上面的例子将创建一个lib.js和lib.node.js到您的文件夹dist中。

资源

compare-webpack-target-bundles：测试和查看不同webpack目标的好资源。也非常适合bug报告。

Boilerplate of Electron-React Application: 电子主进程和渲染进程的构建过程的一个很好的例子。

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