• 反腐败国际合作"朋友圈"又大了! 2019-07-13
  • 前线 从一面“魔镜” 看苏宁科技集团智能化发展战略 2019-07-13
  • 身份证被盗产生不良记录 网络虚拟账号权属纠纷如何避免 2019-07-07
  • 的确,呆子七窍通了栁窍。[哈哈] 2019-06-20
  • 强国博客首页整合公告 2019-06-08
  • 西海都市报数字报刊平台 2019-05-27
  • 美国反拥枪的孩子很受伤 2019-05-25
  • C罗戴帽单骑救主 葡萄牙33战平西班牙 2019-05-25
  • 证监会去年对外公开监管信息14560条 2019-05-16
  • 中山八路总站调整12公交线 2019-05-16
  • 谢春涛:深刻把握“中国特色社会主义进入新时代”的重大意义 2019-05-09
  • 湖南一博士生举报水利局领导受贿 遭到冒牌纪委约谈 2019-05-09
  • 西安地铁唐风诗韵文化专列将于6月18日首发 2019-04-30
  • 铜梁区旧县街道:全面提升执行力 推动工作落地见效 2019-04-30
  • 上海电影节女性影人大放异彩 中生代女演员不用焦虑 2019-04-29
  • 高手问答第 229 期 —— 连 Webpack 都用不好,敢说自己是高级前端配置工程师?

    局长 发布于 06/17 17:20
    阅读 7K+
    收藏 21

    广东十一选五推荐号 www.qhysp.com 从首席 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
    局长
    局长

    高手问答第 229 期 —— 连 Webpack 都用不好,敢说自己是高级前端配置工程师?
    @孤月蓝风 @创业是喝可乐 @yangfeng002 @7upzcc @克己克己
    恭喜以上五位网友或获得图书一本
    请私信@局长 告知快递信息(格式:姓名+电话+地址)!

    创业是喝可乐
    创业是喝可乐
    @局长 收到私信了没
    1
    quanwei9958
    quanwei9958

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

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

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

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

    @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 的默认配置,总体来说是比较合理的,这部分书里也有详细讲解。
    返回顶部
    顶部
  • 反腐败国际合作"朋友圈"又大了! 2019-07-13
  • 前线 从一面“魔镜” 看苏宁科技集团智能化发展战略 2019-07-13
  • 身份证被盗产生不良记录 网络虚拟账号权属纠纷如何避免 2019-07-07
  • 的确,呆子七窍通了栁窍。[哈哈] 2019-06-20
  • 强国博客首页整合公告 2019-06-08
  • 西海都市报数字报刊平台 2019-05-27
  • 美国反拥枪的孩子很受伤 2019-05-25
  • C罗戴帽单骑救主 葡萄牙33战平西班牙 2019-05-25
  • 证监会去年对外公开监管信息14560条 2019-05-16
  • 中山八路总站调整12公交线 2019-05-16
  • 谢春涛:深刻把握“中国特色社会主义进入新时代”的重大意义 2019-05-09
  • 湖南一博士生举报水利局领导受贿 遭到冒牌纪委约谈 2019-05-09
  • 西安地铁唐风诗韵文化专列将于6月18日首发 2019-04-30
  • 铜梁区旧县街道:全面提升执行力 推动工作落地见效 2019-04-30
  • 上海电影节女性影人大放异彩 中生代女演员不用焦虑 2019-04-29
  • 任选9场的玩法 德甲历史射手榜 腾讯分分彩投注分享 qq游戏里有推牌九 北京pk10数学天才揭秘 英超积分榜网易彩票 台湾码最快开奖直播 欢乐斗地主刷分器 一波中特狤在家 秒速飞艇玩法 七乐彩游戏规则 2019海南环岛赛具体时间 彩票7星彩12033 极速十一选五是那里的 后三组选