尽管 Webpack 通常被用来构建 Web 项目，但其实 Webpack 还可以被用在其他类型的项目中。比如 NodeJS 环境、桌面应用环境（比如：Electron）等。

Webpack 通过 target 字段来控制输出目标。

输出为 Web 应用

web 是 target 字段的默认取值，用来构建 Web 项目。在最终的构建结果中，Webpack 运行时会启动应用程序，然后通过 manifest 文件中记录的模块列表信息来加载模块。

从 Webpack 5 开始，target 的默认值变为 browserslist，以防项目中已经定义了浏览器配置。没有浏览器配置时，默认值为 web。通过 .browserslist 文件，Webpack 可以有针对性的输出结果，而不需要兼容一些老旧浏览器。Webpack 同时还支持将构建目标指定为仅满足某些特定语言规范（比如 es2020）即可，也支持设置一组构建目标（比如 ["web", "es2020"]）。

Web worker

设置 target 为 webworker，可以将应用打包为 web workeropen in new window。我们可以通过 Web worker 来实现完成复杂的计算工作，从而避免影响主流程的用户体验。

在使用 Web worker 这个 target 的时候，有一些限制需要注意：

• 不能使用 Webpack 的 hash 特性，即各种 hash 占位符不能生效。
• 在 Web worker 中不能操作 DOM。

输出为 NodeJS 应用

Webpack 提供了两个 Node 相关的 target 选项：node 和 node-async。在使用 node 的时候，会使用标准的 Node require 来加载模块，而在 node-async target 下，Webpack 会对输出模块进行包装，从而实现异步加载。

Node targets 主要被用在服务端渲染（Server-Side Rendering）。从 Webpack 5 开始，支持将 target 设置为具体的 Node 版本，比如 node10.13。

如果我们要在服务中使用 Webpack，nodemon-webpack-pluginopen in new window 这个插件可以在 webpack 配置发生变化的时候主动重启服务进程。

输出为桌面应用

目前市面上有很多用来开发桌面应用的框架，比如 NW.jsopen in new window 和 Electronopen in new window。Webpack 可以分别设置如下的构建目标来输出：

• node-webkit 针对 NW.js 输出
• atom, electron 和 electron-main 针对 Electron 主进程open in new window
• electron-renderer 针对 Electron 渲染进程输出

总结

我们可以通过 target 字段来控制 Webpack 的构建输出目标，target 字段的默认值是 web。

除了 Web 应用以外，Webpack 还可以输出桌面、NodeJS 和 Web worker 应用。

NodeJS 场景下，Webpack 通常会被用在服务端渲染场景中。

关注微信公众号，获取最新推送~

加微信，深入交流~