构建目标

尽管 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 的目标:nodeasync-node。除非使用异步模式,否则它使用标准的 Node require 加载块。在这种情况下,它包装模块,以便通过 Node fsvm 模块异步加载它们。

使用 Node 目标的主要例子是服务端渲染(SSR)。

桌面目标

有一些开发桌面应用的框架,例如 NW.js(以前叫做 node-webkit)和 Electron(以前叫做 Atom)。Webpack 也可以把它们作为打包目标:

  • node-webkit - 针对 NW.js 进行打包,并包含一些实验性质的功能。
  • atomelectronelectron-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 目标会派上用场。

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

用户头像
登录后发表评论