GitHub 上拥有 48.8k star的webpack,为什么我建议你学好它? | 极客时间
目前为止,webpack 在 GitHub 上已拥有 48.8k 的 star,在前端代码打包器领域内,算得上是时下最流行的前端打包工具。它可以分析各个模块的依赖关系,最终打包成我们常见的静态文件:.js 、 .css 、 .jpg 、.png,极大地提升了开发至发布过程的效率。
所以,不少人称它为:模块打包机。
webpack工作流程图
可是,不少前端人,对于 webpack 的使用和了解只停留在了 20% 的基础功能上,一方面是因为大家觉得对 webpack “浅尝辄止”即可,另一方面是因为 webpack 难上手:
有着众多新概念。比如 entry、output、mode、loaders 和 plugins、热更新、Code Spliting、Tree-Shaking 等等,就能让初学者望而生畏。
过重的插件体系。插件体系是 webpack 的核心,可以说,webpack 的生态就是建立在众多插件之上的。但一个简单的构建项目,可能就需要 14 个插件:7 个第三方插件 + 7 个 webpack 内置插件。按照平均一个插件含有 2-3 个配置项(这已经是往低了算了)来计算,14 个插件就有 30 多项配置。
不过,作为一个老前端人,我特别想嘱咐大家一句:不管你是使用 React、Angular.js 还是 Vue,深入掌握 webpack 的使用及原理,收获绝对会超过你的想象。
首先,webpack 可以极大提升你的工作效率,扩阔你的前端技术栈。
其次,webpack 十分有利于你去做跨端开发,比如小程序、Weex、React Native、Electron 等框架的打包。
而且,由于前端工程化越来越受重视,不少大厂在面试前端时,webpack 相关知识点是必考项。比如下面这些面试题,看看你能不能给出让面试官满意的回答。
有哪些常见的 loader?他们能解决什么问题?
webpack 的构建流程是什么? 从读取配置到输出文件的整个过程
是否写过 loader 和 Plugin ?描述一下编写 loader 或 Plugin 的思路?
webpack 的热更新是如何做到的?说明其原理?
如何利用 webpack 来优化前端性能?(提高性能和体验)
所以当极客时间的编辑找到我,想让我开一门工具课时,我很乐意当一个贡献者,把我对 webpack 的理解与运用分享出来。
我认为系统掌握 webpack,是有一定学习路线的。比如在掌握 webpack 打包的速度、体积,及页面加载时的性能优化之前,你需要先搞懂 webpack 内部的运行原理和插件机制。这样,你才能理解并彻底掌握后面的知识点。
于是,就有了极客时间新上线的视频课程《玩转 webpack》,基于最新版 webpack 4 来设计,覆盖 webpack 入门、配置、实战、优化、原理等方方面面的内容。我会循序渐进地带你从工程化角度,全方位掌握 webpack 的核心技能和优化策略。
无论你是对 webpack 一无所知的初学者,还是经验丰富的前端工程师,都能够通过这个课程,提升对 webpack 的理解,并在 Web 开发中更高效地运用 webpack。
我是程柳锋,腾讯高级工程师,负责 IVWEB 团队的社区和工程化。同时,我在空闲时间还开发了「前端工作流和规范工具 Feflow」项目,获得了“腾讯 2018 年度十佳内部开源项目” 奖项。
在腾讯,我曾主导团队将 Fis3 构建切换到 webpack 4,过程中涉及到多页面打包、SSR、PWA、Prender 等多种构建场景,和多实例构建、并行压缩、公共资源分包、Tree-Shaking、动态 Polyfill 等构建策略。
这些经历,使我对 webpack 构建的打包速度和体积优化有了非常丰富的实战经验,同时也对前端工作流和团队开发规范实施有了深刻的认识。
工欲善其事,必先利其器。我可以保证跟着我学完,你对 webpack 的掌握可以超过 80% 的前端人,进入一个全新的前端技术栈。
基础篇:带你掌握 webpack 的核心概念和开发必备技巧。
进阶篇:带你以工程化的思维,去编写一份健壮可维护的 webpack 构建配置,同时掌握 webpack 构建速度和体积的优化策略。
原理篇:通过 webpack 源码,让你了解 webpack 内部的运行原理,掌握编写自定义 Loader 和插件的能力。
实战篇:从一个 Web 商城项目出发,讲解 webpack 如何运用到实际的项目中,并且最大化地提升开发阶段和发布阶段的构建体验。
专栏刚上新,限时优惠 ¥68,原价 ¥99。
每邀请一位好友,你可获得¥24 现金返现 (下单后自动返 App 里提现),关注「极客时间」微信公众号可获取返现通知。
我们为订阅用户准备了一份大礼包,来自国内顶级的技术大会: GMTC 2018 全球大前端技术大会(门票价值 4800 元)。会议全场 PPT 全部免费送给你,扫码购买即有!(获取方式,公众号后台回复:「webpack」)
👆👆👆
限时¥68,原价¥99
拓宽你的前端技术栈
👇点击「阅读原文」,免费试看
- webpack你值得拥有-从四个核心配置谈起
- webpack你值得拥有-从四个核心配置谈起
- EasyDSS高性能流媒体服务器前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- java面试第一次问题,时间没把握好,有点紧张,其实都是很简单的题,笔试感觉良好,面试可能回答不太满意,继续加油,建议初学者把基础学扎实,葵花宝典你值得拥有
- Java Web Start为什么能加载pack.gz
- 作为程序员,必须知道的 Web 协议有哪些?| 极客时间
- 为什么vue+webpack需要用到node,如何部署项目到服务器?
- 什么是WebPack,为什么要使用它?
- webpack学习笔记-0-为什么需要webpack
- 优化 Webpack 构建性能的几点建议
- Windows下的webpack项目上传到github,并忽略node_modules文件夹
- Web Scraping with Python: 使用 Python 爬 GitHub Star 数
- Webpack 实践技巧与建议
- 什么是WebPack,为什么要使用它?
- webpack的配置文件为什么没起作用?
- 上传webpack打包文件到GitHub
- 【第1147期】webpack 为什么这么难用?
- 学好WEB前端前端的6点建议
- 从github上pork下来的vue项目,webpack-dev-server’不是内部或外部命令
- 学习webpack过程并上传到github