问答1 问答5 问答50 问答500 问答1000
网友互助专业问答平台

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

提问网友 发布时间:2022-04-20 10:05
声明:本网页内容为用户发布,旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。
E-MAIL:1656858193@qq.com
2个回答
热心网友 回答时间:2022-04-06 11:17
1.文档缺失,尤其中文文档

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

稍微复杂一点的项目,如果使用webpack编译,不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完,在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。总之正如下面有人回答那样,配置文件一旦跑起来,是根本不敢去改的,生怕又出错。
webpack的错误提示也非常难看懂,基本不可能从错误很直观的找到原因,长期以来碰到问题只能靠猜,你没看错,就是靠猜!!
3.编译慢
经验不足的同学很容易碰到这个问题,当然可以通过一些手段做优化,比如配置mole的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了),所以这会导致开发环境模板无法引用静态资源。当然,有一种解决方案就是静态资源不改变文件名称,预先写好路径,开发环境和生产环境同名(即覆盖式发布)。
热心网友 回答时间:2022-04-06 12:35

配置多入口时,没有glob的方式,需要额外处理。

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

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

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

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

相关推荐
  • 构建工具是什么

    构建工具是什么

    构建工具是什么:构建工具是一个把源代码生成可执行应用程序的过程自动化的程序,构建包括编译、连接跟把代码打包成可用的或可执行的形式。什么是构建工具构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk)。构建包括编译、连接跟把代码
    查看详情
  • webpack对html文件的处理

    webpack对html文件的处理

    webpack对html文件的处理:本篇文章给大家分享的是关于webpack对html文件的处理 ,步骤都很详细,有需要的朋友可以参考一下为什么去处理html文件 我们所有的方法都打包到了dist的文件夹下面,而我们的html是在自己定义的文件夹下面,如果自己手动再去一个一个src引入这些dist文
    查看详情
  • webpack实现的多入口项目脚手架

    webpack实现的多入口项目脚手架

    webpack实现的多入口项目脚手架:简介基于 webpack2 实现的多入口项目脚手架,主要使用 extract-text-webpack-plugin 实现 js 、css 公共代码提取,html-webpack-plugin 实现 html 多入口,less-loader 实现 less 编译,postcss-loader 配置 autoprefixer
    查看详情
Gulp和webpack的区别,是一种工具吗 hpwebpack干嘛用的 关于办理米粉卡 我能办米粉卡吗 怎么办米粉卡 我办理米粉卡后可以将自己原来的手机号植入到米粉... 办一个小型粉条加工厂总共需要投资多少钱? 菠菜办粉丝怎么做好吃 衣服染色了怎么办粉红色衣服染上了蓝色,用彩漂水漂了 为什么安贞医院不办粉红色的本字要我到我老公办结... 如何办粉条厂 问道武器上粉出的伤害怎样才能强化满?后面的百分... 凉办粉丝怎么做好吃 手机发短信能办粉砖吗 混呢宝不人么有,够奶合怎还奶奶?有呀喂没养水喝... 增肌粉和蛋办粉有没有附作用?是否含激素 办粉丝粉条厂能赚钱吗 办粉砖的话死去的QQ宠物能复活么 淡奶油预办粉没过保质期可以用吧? 小狗做办粉证 多少钱能办下来 webpack html-loader这个是针对img的吗 如何评价 Webpack 2 新引入的 Tree-shaking 代码优... 如何用webpack打包一个网站应用 Webpackz 最近非常火 谁能说下大概的意思是什么 看... webpack中output.publicPath是不是鸡肋 webpack多页面怎么使用 iPhone SE2+16和红米note33+32哪个更合算一些? 十六岁用iPhone se2怎么样? 肺小结节se2lm22 16 17 26是什么意思 苹果se2和se是不是一样的 苹果手机se2升级ios15.2怎么样? 两肺多发小结节(SE2ⅰM8、16、18、20、22、24、29)... 长安Cs75LS4ASE2A7GJ150856是16年手动2.O豪华版新... se2和se3色差大么 安川G7 SE2代码是什么 捷安特13年xtc750和 atxse2哪个值得购买 步步高V206怎么样 步步高V206的重要参数 步步高音乐手机V206机型怎么会停产问? 步步高v206的上市时间?
Top