尽管 Webpack 最常用于打包 Web 应用程序,但它可以做得更多。您可以在 Node 或桌面应用中使用它,例如 Electron。Webpack 还可以打包库,它会在打包结果中写入特定的包语法代码。
Webpack 的输出目标由 target
字段控制。接下来您将了解主要的构建目标,然后深入了解一些与框架相关的构建目标。
Web 目标
Webpack 默认使用 Web 作为构建目标。该目标非常适合您在本书中开发的 Web 应用程序。Webpack 引导应用程序并加载其模块。初始加载的模块列表由 manifest 维护,后续的模块则按定义互相加载。
web worker
webworker 目标把你的应用程序打包成 web-worker 。如果要在应用程序的主线程之外执行计算而不降低用户界面的速度,则使用 Web worker 非常有用。您应该注意以下几个限制:
- 使用 webworker 目标时,不能使用 webpack 的哈希功能。
- 您无法操纵 web worker 中的 DOM。如果您将本书中的案例项目打包为 web worker,则不会显示任何内容。
Web Workers 章节中详细讨论了 Web Worker 及其用法。
Node 目标
Webpack 提供了两个特定于 Node 的目标:node
和 async-node
。除非使用异步模式,否则它使用标准的 Node require
加载块。在这种情况下,它包装模块,以便通过 Node fs
和 vm
模块异步加载它们。
使用 Node 目标的主要例子是服务端渲染(SSR)。
桌面目标
有一些开发桌面应用的框架,例如 NW.js(以前叫做 node-webkit)和 Electron(以前叫做 Atom)。Webpack 也可以把它们作为打包目标:
node-webkit
- 针对 NW.js 进行打包,并包含一些实验性质的功能。atom
,electron
,electron-main
- 针对 Electron main process。electron-renderer
- 针对 Electron renderer process。
开发过程中,如果您想要热加载基于 React 和 Electron 的 Webpack 配置,electron-react-boilerplate 是一个很好的起点。使用官方 Electron 快捷指南也是一种方法。
总结
Webpack 支持 Web 以外的打包目标。
回顾一下:
- Webpack 的输出目标可以通过
target
进行控制,它默认为web
但也接受其他选项。 - 除了 Web 目标之外,Webpack 还可以定位为桌面,Node 和 Web Worker。
- 如果针对的是服务器端渲染,Node 目标会派上用场。
您将在下一章学习如何处理多页设置。