webpack 中关于 splitChunks 的几个重点属性的使用场景和解析，结合 bundle analyzer 输出图来分析，快来康康吧~

做了一夜动画，让大家十分钟搞懂Webpack 一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。 二、原理分析 首先我们通过一个制作一个打包文件的原型。 假设有两

webpack 对于每个前端儿来说都不陌生，它将每个静态文件当成一个模块，经过一系列的处理为我们整合出最后的需要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / ... （打包全世界ヾ(◍°∇°◍)…

如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js…

Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。本文将尝试探索 webpack plugin，揭秘它的工作原理，以及如何开发一个 plugin。 通过插件我们可以扩展 web…

你盼世界，我盼望你无bug。Hello 大家好！我是霖呆呆！ 有很多小伙伴在打算学写一个webpack插件的时候，就被官网上那一长条一长条的API给吓到了，亦或者翻阅了几篇文章之后但还是不知道从何下手。 而呆呆认为，当你了解了整个插件的创建方式以及执行机制之后，那些个长条的AP…

官方解释,是下一代JavaScript 语法的编译器。 既然是下一代Javascript的标准，浏览器因版本的不同对此会有兼容性问题，JavaScript的新的方法都不能使用，但是目前我们在项目开发一直提倡使用最新的语法糖编写，不但能减少代码量，而且async,await等新特…

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有…

我们知道Babel是一个通用型的JS编译器，通过Babel我们可以把最新标准编写的JS代码向下编译成兼容各种浏览器或Node的通用版本。你可以通过安装预设（presets，一系列同类插件组合） 或 插件（plugins） 告诉Babel应该如何进行代码转译，例如：@babel/…