为了账号安全,请及时绑定邮箱和手机立即绑定

前端构建工具webpack有什么缺陷?

/ 猿问

前端构建工具webpack有什么缺陷?

波斯汪 2021-02-01 10:06:19

前端构建工具webpack有什么缺陷


查看完整描述

2 回答

?
动漫人物
  1. 配置多入口时,没有glob的方式,需要额外处理。

  2. 目录结构复杂时,file-loder里面的path功能太弱,很多时候无法自定义构建后的目录结构,只能放在一个目录下。

  3. 源码比较复杂,遇到问题看源码,要花很长时间。

  4. 如果没有 babel, webpack 对 ES2015+ 的语法是不接受的,会提示用指定 loader。这意味着,在支持部分 ES2015 语法的 firefox 与 chrome 浏览器中能直接跑的代码,无法用 webpack 编译。


查看完整回答
反对 回复 2021-03-28
?
慕的地8271018

1.文档缺失,尤其中文文档

长期以来webpack官方文档和example匮乏,提供的一些例子都是很简单那种,经常发现完全按照例子来配置但就是跑不起来,中文文档就更不用说了,少的可怜。这个问题也直接导致下面的第2点。
2.配置难&难调试

稍微复杂一点的项目,如果使用webpack编译,不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完,在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。总之正如下面有人回答那样,配置文件一旦跑起来,是根本不敢去改的,生怕又出错。
webpack的错误提示也非常难看懂,基本不可能从错误很直观的找到原因,长期以来碰到问题只能靠猜,你没看错,就是靠猜!!
3.编译慢
经验不足的同学很容易碰到这个问题,当然可以通过一些手段做优化,比如配置module的resolve、root等,使用happypack加速、dll提前编译等等。但是笔者曾经尝试过happypack,对编译速度有提升但效果不明显,dll的话我有按照官方文档的做法去做,但是最终编译出来又报了一些莫名其妙的错(也有可能是代码写的有问题),总之心累,后来直接改成externals方式,全局script引入第三方库。
4.对server-render不友好
webpack本质上还是静态打包,意思就是打包完成之后其实文件的加载顺序已经固定,只是被加载的时间不定而已。所以使用webpack原则上不存在按需加载之类的说法,code split其实是人工分隔,但是真实的按需加载场景岂是人工能枚举完的 (下划线这句话不太好解释,也不想过多解释,熟悉前端工程的人应该都明白啥意思)。
在这里我要说的对server-render不友好其实是指html的处理,webpack其实是通过在js里用require标记资源然后加载任意资源(css、图片、fonts等等),但其实html文件才是页面真实的入口,最终编译出的js还是需要引入到html里,为了防止css懒加载导致页面抖动,编译完的css还需要从js里边提取出来放到html外链。

目前一般都是通过html-webpack-plugin来做这个事情,先搜集某个html所引用的静态资源最终自动插入到html。这种方式对于前端渲染的应用没有问题,但是对于server-render的那就不行了,因为server-render下html是作为模板由后端语言吐出,而开发模式下(例如webpack-dev-server)webpack是不会输出任何文件的(开发环境webpack是将文件放到内存然后在路由层自动serve了),所以这会导致开发环境模板无法引用静态资源。当然,有一种解决方案就是静态资源不改变文件名称,预先写好路径,开发环境和生产环境同名(即覆盖式发布)。



查看完整回答
反对 回复 2021-03-28

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信