通常，js代码出错，控制台会提示第几行第几列代码出错。但是webpack打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。 sourceMap就可以解决这个问题。sourceMap就是一个信息文件，里面储存着打包前的位置信…

总算给自己找了一个相对合理的理由，哈哈。既然有人这么想，跟随一起探索下哈。 Antd 4.X 版本是利用 webpack 基于 ES modules的 treeshaking 实现的按需加载。 根据入口文件，递归查询相关依赖，然后通过各种 loader 和各种 plugin ，…

随着web应用复杂度的增加，组件化，工程化，自动化成了前端发展的趋势。每个前端团队都在打造自己的前端开发体系，这通常是一个东拼西凑，逐渐磨合的过程，那究竟一套完整的前端工程化方案是怎样实现，笔者

随着前端工程化的不断发展，构建工具也在不断完善。Webpack藉由它强大的扩展能力及万物皆模块的概念，逐渐成为前端构建工具中的小王子，随着webpack4的不断迭代，我们享受着构建效率不断提升带来的快感，配置不断减少的舒适，也许你已经可以熟练使用Webpack进行项目构建，但是…

Tree-Shaking这个名词，很多前端coder已经耳熟能详了，它代表的大意就是删除没用到的代码。这样的功能对于构建大型应用时是非常好的，因为日常开发经常需要引用各种库。但大多时候仅仅使用了这些库的某些部分，并非需要全部，此时Tree-Shaking如果能帮助我们删除掉没有…

在上周末广州举办的feday中，webpack的核心开发者Sean在介绍webpack插件系统原理时，隆重介绍了一个中国学生于Google夏令营，在导师Tobias带领下写的一个webpack插件，webpack-deep-scope-analysis-plugin，这个插件能…

前一段时间我把webpack源码大概读了一遍，webpack 到4.x版本后，其源码已经比较庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。 过度分析源码对于大家并没有太大的帮助。本文主要是想通过分析webpack的构建流程以及实现一个简单的webpack来让大家对we…

本文已收录在Github github.com/Geekhyt，欢迎Star。 从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做…

2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…