Webpack小书

本书翻译自《Webpack Book》,作者:Tobias Koppers。
由于水平有限,翻译不当之处,敬请指正。
原书地址为 https://survivejs.com/webpack/foreword/

Webpack 解决了前端开发中的一个基本问题:打包。它接收各种资源,例如 JavaScript,CSS 和 HTML,并将它们转换为便于浏览器使用的格式。这样做很好地消除了开发维护中带来的巨大痛苦。

由于 Webpack 是配置驱动的,导致其不是很容易学习,但它非常强大。本指南的目的是帮助您开始使用 Webpack,并在此基础上有所提高。

什么是 Webpack

webpack,JavaScript 应用打包器

Web 浏览器是为 HTML,CSS 和 JavaScript 设计的。随着项目的发展,跟踪和配置所有这些文件变得复杂,随着时间推移,人力就会显得很无助。Webpack旨在解决这些问题。管理复杂性是 Web 开发的基本问题之一,解决这个问题对项目的开发大有裨益。

Webpack 并不是唯一可用的打包工具,并且已经出现了一系列不同的工具。例如 Grunt 和 Gulp,都是其中的佼佼者。但是,它们通常需要您手动编写一些工作流程;而 Webpack 直接将该问题交给了打包工具本身,相较之下,理念上更为先进。

Webpack 是如何做到的

Webpack 采取的是另外一种路线。它允许您将项目视为依赖图。您可以在JS 文件中,通过标准 requireimport 语句提取项目所需的依赖项。如果需要,您可以以相同的方式引用样式文件和其他资源。

Webpack 会按照您的配置和代码为您完成所有预处理,返回打包结果。这种声明式方法是通用的,但很难学习。

在您开始了解 Webpack 的工作原理后,Webpack 将成为不可或缺的工具。本书旨在帮助您通过最初的学习曲线,引领你走入更高的境界。

本书是如何组织的?

本书将首先解释什么是 Webpack。之后的多个章节会从不同的角度讨论webpack。在阅读这些章节时,您将开发自己的 Webpack 配置,同时学习一些基本的技巧。

这本书分为以下几部分:

  • 开发,通过 Webpack 启动并运行。此部分介绍了浏览器自动刷新等功能,并说明了如何组合管理配置,以使其更容易维护。
  • 样式,这一部分着墨于样式相关主题。您将学习如何使用 Webpack 加载样式以及如何自动添加浏览器厂商 prefix 等。
  • 加载,详细解释了 Webpack 的 Loader,并向您展示如何加载图像,字体和 JavaScript 等资源。
  • 构建,介绍了 Source Map 以及 Code Splitting 的思想。您将学会如何构建代码。
  • 优化,将您的构建推向生产质量水平,并引入许多较小的调整以使其更小。您将学习如何调整 Webpack 的性能。
  • 输出,讨论了 Webpack 的输出相关技术。您将了解如何使用 Webpack 管理多个页面,并了解服务器端渲染的基本概念。
  • 技术,讨论了几个具体的技术点,包括动态加载、Web Worker、国际化、应用部署,以及在 Webpack 中使用 npm 包。
  • 扩展,展示了如何使用 Loader 和插件扩展 Webpack。

最后,有一个简短的结论章节回顾了本书的要点。它包含本书中的技术清单,方便您在项目中有条不紊地检查使用。

本书末尾的附录涵盖了次要主题,有时还会深入探讨主要内容。您可以根据自己的兴趣以任何顺序来阅读它们。

最后的问题排查附录介绍了 Webpack 出错时应采取的措施。它涵盖了问题排查的过程,因此您知道该怎么做以及如何调试该问题。如有疑问,请研究附录。如果您不确定术语及其含义,请参阅本书末尾的词汇表

谁是本书的读者?

您应该具备JavaScript,Node 和 Npm 的基本知识。如果您对 Webpack 有所了解,那就太棒了!通过阅读本书,您可以加深对这些工具的理解。

如果您对该主题知之甚少,请考虑学习相关的前置知识。如果您已经了解Webpack,您也可以浏览并选择您认为有价值的部分。

如果您已经熟悉了 Webpack,那么本书中仍有一些内容供您使用。浏览它,看看是否有你可以采用的新技术。特别是阅读本章末尾和本书最后一章的摘要。

用户头像
登录后发表评论