构建目标 | Targets
因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种_构建目标(target)_，你可以在你的 webpack 配置中设置。
千万不要把webpack中的target属性和output.libraryTarget 属性进行混淆。有关这方面的知识可以参见本档案中output属性一章中的介绍。
用法
要设置目标属性，只需在webpack config中设置目标值：
webpack.config.js
module.exports = {
target: 'node'
};在上面例子中，使用 node webpack 会编译为用于「类 Node.js」环境（使用 Node.js 的 require ，而不是使用任意内置模块（如 fs 或 path）来加载 chunk）。
每个_target_都有各种部署(deployment)/环境(environment)特定的附加项，以支持满足其需求。查看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 ];上面的例子将创建一个lib.js和lib.node.js到您的文件夹dist中。
资源
从上面的选项可以看出有多个不同的部署_目标_可供选择。下面是一个示例列表，以及你可以参考的资源。
- compare-webpack-target-bundles：测试和查看不同webpack目标的好资源。也非常适合bug报告。
- Boilerplate of Electron-React Application: 电子主进程和渲染进程的构建过程的一个很好的例子。
需要查找最新的实时代码或样板中使用的这些webpack目标的示例。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
