总结

正如本书所展示的那样,Webpack 是一个多功能的工具。为了更容易回顾内容和技术要点,请查看下面的清单。

一般清单

  • 源映射允许您在开发期间在浏览器中调试代码。即使是生产环境中,它也可以提供更高质量的堆栈跟踪。Source Maps)一章将深入讨论的话题。
  • 为了更快速第构建,请考虑性能优化。“性能”一章讨论了可用于实现此目的的各种策略。
  • 要保持配置的可维护性,请考虑组合配置的方式。由于 Webpack 配置是 JavaScript 代码,因此可以通过多种方式管理配置。“组合 Webpack 配置”一章讨论了该主题。
  • 可以自定义 Webpack 使用包的方式。使用包一章介绍了与此相关的具体技术。
  • 有时您必须扩展 Webpack。在扩展 loader 扩展插件章节展示了如何实现这一目标。您还可以在 Webpack 配置上下功夫,并根据自己的需要抽象出一些配置层。

开发清单

  • 要在开发期间充分利用 Webpack,请使用 webpack-dev-server(WDS)。您还可以找到可用于开发服务器的中间件。
  • Webpack 实现了热模块替换(HMR)。它允许您在应用程序运行时更换模块而不强制浏览器刷新。热模块更换附录包含详细的话题。

生产清单

样式

  • Webpack 默认将样式定义内联到 JavaScript。为避免这种情况,请使用 MiniCssExtractPlugin 或其他等效解决方案将 CSS 分离到单独的文件中。分离样式一章介绍了如何实现这一点。
  • 要减少手写 CSS 规则的数量,请考虑自动添加前缀自动添加前缀章节介绍了如何执行此操作。
  • 可以基于静态分析消除未使用的 CSS 规则。在去除未使用的样式章节介绍了该技术的基本思想。

资源

  • 通过 Webpack 加载图像时,需要对其优化以减少用户的下载负担。“加载图片”一章说明了如何执行此操作。
  • 根据您必须支持的浏览器,仅加载您需要的字体。“加载字体”一章讨论了该主题。
  • 压缩源文件以缩小客户端必须下载的有效负载。压缩代码一章介绍了如何实现这一点。

缓存

  • 为了更好的利用客户端缓存,我们可以把 vendor 包拆分出来。这样,客户端在理想情况下的下载量就会减少。分割打包章节中讨论了的该话题。“将哈希值添加到文件名”一章显示了如何在此基础上实现缓存失效。
  • 使用 Webpack 的代码拆分功能按需加载代码。如果您不需要同时使用所有代码,而是可以将其推送到特定逻辑触发(例如单击用户界面元素)之后,该技术会很方便。代码拆分一章详细介绍了该技术。动态加载了章介了绍了更高级的代码加载技术。
  • 将哈希添加到文件名中,如“添加哈希值到文件名”一章所述,以便从缓存中获益并提取 manifest 文件以进一步改进解决方案,详细说明请参照提取 manifest 一章。

优化

  • 使用 ES2015 模块语法,以利用Tree Shaking。它允许 Webpack 通过静态分析消除未使用的代码。请参阅 Tree Shaking 章节了解具体的技术细节。
  • 可以通过环境变量来控制 Webpack 的运行环境。您可以通过这种方式实现特定的功能。请参阅“环境变量”一章了解相关说明。
  • 分析构建的统计信息以获取需要改进的内容。“构建分析”一章介绍了如何针对多个可用工具执行此操作。
  • 将部分计算交给 Web worker 处理。Web Workers 一章介绍了如何实现这一点。

输出

  • 清理构建目录并将有关构建的信息附加到结果中。清理构建目录章节展示了如何做到这一点。

总结

Webpack 允许您使用许多不同的技术来拼接您的构建。它支持多种输出格式,如本书的输出部分所述。尽管 Webpack 的名字含有 Web,但它不仅适用于 Web。大多数人在 Web 中使用它,但它的功能远不止于此。

用户头像
登录后发表评论