Tim的资源站

尽管 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 目标会派上用场。

您将在下一章学习如何处理多页设置。