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

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

输出为 Web 应用

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

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

Web worker

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

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

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

输出为 NodeJS 应用

Webpack 提供了两个 Node 相关的 target 选项:nodenode-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 windowElectronopen in new window。Webpack 可以分别设置如下的构建目标来输出:

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

总结

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

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

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

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