webpack 为什么这么难用?

2021-07-16 17:48:34 浏览数 (1)

如今对于每一个前端工程师来说,webpack 已经成为了一项基础技能,它基本上包办了本地开发、编译压缩、性能优化的所有工作,从这个角度上来说,webpack 确实是伟大的,它的诞生意味着一整套工程化体系开始普及,并且慢慢统一了前端自动构建的让前端开发彻底告别了之前的刀耕火种时代。现在 webpack 之于前端开发,正如同 gcc/g 之于 C/C ,是一个你无论如何都绕不开的工具。

但是,即使它如此伟大,也有一个巨大的问题,那就是 webpack 实在是太难用了!!!

我从多年前的 webpack 1.0 时代就一直在用它,现在也不能说完全掌握了它,很多时候真的让我产生了怀疑,究竟是因为我的能力不足,还是因为 webpack 自身的设计就太难用?随着我接触到越来越多的前端项目,听到越来越多的吐槽,我也越发地相信,是 webpack 自身的问题,导致它变得如此复杂又难用。

举个简单的例子,一个 vue-cli 生成的最简单的脚手架项目,开发、构建相关的文件就有 14 个之多,代码超过 800 行,而真实的项目只会比这个更多:

所以,既然这篇文章的标题是《webpack 为什么这么难用?》,那我们就好好在这里分析一下,webpack 难用的根本原因。

一、文档极其不完善

是的,这就是第一位的原因。

我作为参加过 webpack 中文文档翻译的人,真的想说 webpack 即使经过了这么多年的不断迭代,如今的文档依然还是是一坨那啥。作为一个开源项目,设计好不好、易用性怎么样、扩展性怎么样这些问题都是仁者见仁智者见智的,但文档写得很烂这一点上,真的没有任何可以开脱的理由。

对于使用者的不友好

比如,webpack 的插件体系可以说是 webpack 最核心的一部分功能了,基本上一个项目的构建中,大部分任务都是由各种插件完成的。然而,官方文档上对于插件的介绍只有寥寥几句话:webpack · Plugins,甚至推荐你直接去看 webpack 的源码:

更糟的是,现有的文档里(包括 webpack 一些插件的文档也是),大部分内容都是在告诉你 “你这样做就可以了”,而没有解释 “你为什么需要这么做” 以及 “你这么做了会有哪些后果”。

比如,在 target 配置上,官方文档里列举了你可以构建到哪些 target,如 nodenode-webkitelectron-main,但都只是简单的一句话带过:

想知道 target 为 electron-main 时,和浏览器环境的打包有什么不同?对不起,官方文档不想告诉你,看源码或者去 stackoverflow 上搜吧。

官方文档语焉不详的直接后果就是,当你遇到了任何问题,你都没办法在文档里得到直接的回答,而是需要看无数的代码、github issue、stackoverflow、博客文章,然后在自己的项目里反反复复试了好多次,才能大致解决问题。而这种所谓的“解决问题”,一般都是个人经验性的,意味着其它任何一个人想要解决这个问题,都要重复一遍这个流程,时间成本大量上升。

这就是为什么使用 webpack 的时候,经常会出现下面的哲学三问:

  • 这是 webpack 的问题吗?
  • 我要怎么解决这个问题?
  • 咦我是怎么解决的?

0 人点赞