webpac3升级至webpack5踩坑点以及关键点记录，涉及过时plugins以及新plugins的替换。webpack搭配glup的配置，webpack动态cdn的配置。

本篇将从优化开发体验、加快编译速度、减小打包体积、加快加载速度 4 个角度出发，介绍如何对 webpack 项目进行优化。

前言 最近很多小伙伴们都在问vite都出来了，webpack还有必要升级到5么？vite是不是很快就要取代webpack了？ 针对这个问题，我个人观点是：适合你项目的构建工具就是最好的。当前前端的构建

在vue项目开发中，我们会将经常用到的逻辑或模块抽象成组件，对于那些多个项目都有用到的组件，可以考虑封装成组件库，发布到npm。每次要到只需要npm install xx一下，就不用来回拷贝了。下面我们就从0开始来打包一个vue组件库。 组件在使用之前都需要注册组件，注册组件可…

Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。 而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类Tapable。 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 Compiler、Com…

前端性能优化已经过了刀耕火种的年代，现在更多的优化是从代码层面，其中重中之重的当然是 JS 的优化

上一篇文章介绍了单一路由下的骨架屏插件实现。但在真实的产品中，其他页面也是要有各自的骨架屏的。 从上篇文章《开发一个简单易懂的webpack骨架屏插件》，可以知道骨架屏其实就是在js没有加载完成之前，在id为root的div里写一些动画代码，让用户不要看到一篇空白。 我们都知道…

单页面应用其实就是一个html文件，html结构里面有一个div#root，当js加载完毕并且执行完成后，id为root的div会被整个替换掉。所以由此我们可以想到，我们在div#root里面写一些动画之类的html结构，在js没有加载完成的时候，让用户看到的不是一片空白，而是…

自从 2018 年 2 月，webpack4 发布以来，webpack 就暂时没有更进一步的重大更新，为了保持 API 的一致性，旧的架构没有做太多改变，遗留了很多的包袱。阔别 2 年多后，2020 年 10 月 10 日，webpack 5 正式发布，并带来了诸多重大的变更，…