高手问答第 229 期 —— 连 Webpack 都用不好,敢说自己是高级前端配置工程师?

发布于 2019/06/17 17:20
阅读 9K+
收藏 21

从首席 Webpack 配置官、前端打包工程师和 Webpack config engineer 等一些带着强烈自黑性质的称号可以看出,要熟练使用 Webpack 这个流行的前端打包工具并不简单。

既然如此,本期高手问答(2019.6.17-6.23)我们就一起来谈探讨关于 Webpack 的问题。做客高手问答的嘉宾是居玉皓老师。

居玉皓,资深前端开发工程师,目前就职于美国在线流媒体平台 Tubi TV,曾就职于去哪儿网,负责前端基础架构的建设,并主导开发了知名的开源打包工具 YKit。居老师长期专注于前端构建领域,对 Webpack 有深入的研究,积累了丰富的实践经验,在国内为 Webpack 的发展和普及做了较多的努力和贡献。

问答主题:

  • Webpack 的功能特性
  • Webpack 的工作原理
  • Webpack 的应用实践
  • Webpack 的性能优化
  • ……

或有其他相关的问题也可以在此提问。

为了鼓励踊跃提问,@华章   会在问答结束后从提问者中抽取 5 名幸运会员赠予《Webpack实战:入门、进阶与调优》一书。

OSChina 高手问答一贯的风格,不欢迎任何与主题无关的讨论和喷子。

下面欢迎大家向居玉皓老师@YuhaoJu 积极提问,直接回帖提问即可。

加载中
0
局
该评论暂时无法显示,详情咨询 QQ 群:点此入群
创业是喝可乐
创业是喝可乐
@局长 收到私信了没
1
quanwei9958
quanwei9958

@YuhaoJu 很想拜读一下。请问如何系统地学习webpack打包知识呢,webpack 插件太多,每个插件工作方式各异,往往不同的插件还有不同的特性,从自己项目入手掌握这些全部知识太难了,所以有没有系统地学习webpack生态的方式 ?

Y
YuhaoJu
回复 @quanwei9958 : 模块类型和打包类型书里都有涵盖,需要了解可以先看下目录哈
quanwei9958
quanwei9958
回复 @YuhaoJu : 其实很多特性都和标准相关,模块类型,打包类型,而且很少有教程把这些串在一起,都散落到babel这种插件里了, 想问下书里会有这部分的介绍吗 ?
Y
YuhaoJu
如果想系统地学习,你可以跟着官方的 Guides 来,或者跟着书一章一章地进行学习。 插件属于 Webpack 社区产物,建议先从 Webpack 本身入手,插件只是需要哪个再去了解就可以了。
0
wha37
wha37

 @YuhaoJu webpack是一个js打包工具,打包之后,前端项目速度会提高多少?

Y
YuhaoJu
简单来说 Webpack 只是把工程中各个模块合并,然后产出相应的资源,并不会影响速度。但是 Webpack 有一些特性比如代码压缩、异步加载、Tree Shaking 确实可以对工程有一定的性能优化效果。具体会提高多少要看实际的项目,如果用得好的效果应该是会不错的。
0
wha37
wha37

@YuhaoJu  webpack这工具,应用在哪些项目比较多??游戏项目,h5游戏多吗?

Y
YuhaoJu
使用或者不使用 Webpack 和项目是做什么的没有直接的关系,和项目的形态有比较大的关系。 比如项目中的模块越来越多,需要进行打包;或者需要实时编译 ES6、Sass 等代码;或者需要在生产环境进行代码压缩、分片等等都是选择使用 Webpack 的好的理由。
0
创业是喝可乐
创业是喝可乐

@YuhaoJu webpack工具能不能将过去项目 已经写好的多个js文件打包成一个js,这样会不会影响速度,会不会出现加载顺序,依赖调用的问题呢

Y
YuhaoJu
要看原来的 JS 文件是否有采用模块化(如 AMD 等)的方式进行编写,如果有的话那么可以采用 Webpack 并且不用太担心依赖顺序问题。 如果每个 JS 文件都是单独自己做自己的事情, 并且没有模块化语法的存在,那么首先 Webpack 就不会把它们打包在一起,需要人为地首先在各个文件中声明它们的依赖关系(使用 ES6 Module 等等)。
0
独坐苔痕但观罗敷
独坐苔痕但观罗敷
如果说一个打包工具都要深入才算高级工程师那更别说精通css3html5js6了还有 浏览器各种兼容性,各种框架react,vue,Angular等等了 还有前段ui框架这里就不说了.请问高级工程师真的多吗?
独坐苔痕但观罗敷
独坐苔痕但观罗敷
本人应该面前算一枚,可惜我不是做前端的
0
开源中国首席装逼王

@YuhaoJu  请问

我很纠结

对于webpack 大多数框架自带有脚手架,不用操心

实际工作中 配置webpack 基本都是一次性的活儿 基本是配一次基本不会再动

webpack 还需要每个人都掌握吗 还是只需要一个专员维护即可

Y
YuhaoJu
个人认为 Webpack 并不是每一个人都需要掌握,有些项目确实用脚手架就可以了,而有些项目就需要深入它的打包流程去做一些定制化的需求。所以还是要看项目/个人需要。
0
秘封
秘封
你好,我想问下打包后的前端模块是一个单独的文件吗?可不可以单独生成html,css,js之类的分类文件夹?这样的话和后端整合起来会比较方便一点
Y
YuhaoJu
Webpack 默认只会将所有资源放在 output.path 指定的路径中,有一些特殊的 loader 和插件是可以针对资源指定不同的路径的。而作为通用的方法,建议可以写一个小的脚本移动相应的文件,放在 Webpack 每次打包后执行,这样也比较好维护。
--0_0--
--0_0--
可以
0
王圣松
王圣松

@YuhaoJu 老师您好,如何解决多页面环境下webpack打包慢的问题。常常Jenkins都要打包15min+。升级webpack也不管用。难道要做模块拆分?

Y
YuhaoJu
如果工程实在太大,一个是要通过 code splitting 等方法尽可能抽取出公共模块打包成单独的 vendor,减少重复的打包流程;另外就是和楼上观点类似,需要做一定的拆分了。
jump--jump
jump--jump
尝试用external,如果实在不行,只能够抽取基础组件和业务组件(包括辅助类文件)[变化少的]。让主工程只做 变化较大的 业务逻辑 [变化多的]
0
懒猫cat
懒猫cat

想问下如何提高webpack打包的效率以及如何进行分包才能让每个chunk更小更合理 @YuhaoJu

Y
YuhaoJu
书里有专门一章讲打包方面的优化。从大的方面来说一个是让尽可能减少重复的工作,比如设置好 loader 的作用域和缓存,进行 code splitting 等;另外就是充分调动打包的计算性能,比如通过一些插件使用多进程进行打包。 拆分 chunk 不是越小越好,建议看一下 optimization.SplitChunks 的默认配置,总体来说是比较合理的,这部分书里也有详细讲解。
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部