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

请教大神,前端构建工具webpack有什么缺陷?

/ 猿问

请教大神,前端构建工具webpack有什么缺陷?

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


查看完整描述

3 回答

?
慕神8447489
  1. 配置多入口时,没有glob的方式,需要额外处理。

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

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

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


查看完整回答
反对 回复 2019-11-16
?
ITMISS

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了),所以这会导致开发环境模板无法引用静态资源。当然,有一种解决方案就是静态资源不改变文件名称,预先写好路径,开发环境和生产环境同名(即覆盖式发布)。



查看完整回答
反对 回复 2019-11-16
?
婷婷同学_

1、如果没有 babel, webpack 对 ES2015+ 的语法是不接受的,会提示用指定 loader
这意味着,在支持部分 ES2015 语法的 firefox 与 chrome 浏览器中能直接跑的代码,无法用 webpack 编译。
2、因为 webpack 是静态编译,需要在打包时就扫描到所有可能的模块,所以想用 require(expression) 在运行时获取模块目前并不支持。
from 评论:
听临 :第二条,简单的expression是可以被接受了,比如 require('/tests/' + x), 它会把 tests/ 下面的所有东西都打包一遍。
3、由于 webpack 是为模块化而生的工具,所以当你只想复制文件到另一个文件夹,顺便对文件做一些文本补充、替换等工作,你用 webpack 不合适,用 gulp/grunt 更佳。这不算它的缺陷,而属于 webpack 无法取代 gulp 的地方。
4、 webpack 的全局统筹使得你只改动一个文件里的一行代码,也是整个项目全部重新分析与编译,给各个模块分配 webpack_id。

查看完整回答
反对 回复 2019-11-16

添加回答

回复

举报

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