前言 前面我们学习了webpack的核心功能如何实现源代码的转换以及打包。 基于@babel/parser把字符串转换成AST抽象语法树。 对AST进行修改，既对源代码的修改。 使用babel的API

从编译入口->make->seal，然后进行seal阶段整体流程的概述（以流程图和简化代码的形式），然后根据流程图抽离出来的核心模块展开具体的分析

我们知道webpack有个通病，那就是随着项目的不断增大每次构建的时间也会随之越来越长。一起来看看如何将项目的冷启动时长从1分20秒左右优化到十几秒左右吧～

开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直…

webpack是Javascript工具链的关键部分。webpack是个用于现代JavaScript应用程序的静态模块打包工具。

代码分割是 Webpack 最引人注目的特性之一。这个特性允许开发者将代码分割成不同的包，然后可以按需加载或并行加载这些包。它可以用来实现更小的包，并控制资源加载优先级，如果使用正确，将对加载时间产生重大影响。 首先介绍一下 Webpack 默认的代码分割策略。 上面这段话来自…

在当前的前端项目中，常常使用 gulp、webpack、Browserify 等将多个文件压缩合并成一个。这个过程称为打包。 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。接着在页面上引入该 bundle，整个应用即可一次性加载。 打包是个非常…

Webpack 4给我们带来了一些改变。包括更快的打包速度，引入了SplitChunksPlugin插件来取代（之前版本里的）CommonsChunksPlugin插件。在这篇文章中，你将学习如何分割你的输出代码，从而提升我们应用的性能。 SplitChunks插件(webpa…

hello ~ 亲爱的看官老爷们大家好 ~ 最近一直在学习 webpack 的相关知识。曾几何时我总觉得 webpack 的体系庞大而难以掌握，一直回避不愿去学。然而伟人鲁迅曾说过： 世上太多事会因无法掌握而使你狂躁不安，最好的解决方法就是硬着头皮开始做！ 因而就从比较简单的 …