webpack在实例化的时候会在全局创建一个Tapable子类Compiler, 该实例掌握了初始化配置信息，运行编译入口函数，注册和调用插件等等。 但是, 每个chunk都是有css与js组成, 也就是说当其中一个文件发生变化，这个chunk都会重新编译，此时contenth…

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

项目上线前是专门针对 webpack 打包做了优化的，但是在之后做网络优化的时候通过webpack-bundle-analyzer这个插件发现一些公共的js文件重复打包进了业务代码的js中。这些代码体积虽然很小，但是为了将优化做到极致还是想要将其优化一下。这个过程最大的收获就是…

简要说明此版本重点关注以下内容：我们尝试通过持久化存储优化构建性能。我们尝试采用更好的算法与defalut来改善长效缓存。我们尝试通过更好的TreeShaking和代码生成来改善bundle的大小。我

表面看起来没有什么毛病，但是要做一个规范的、多人协作的、可维护的开源项目，开发流程上还是有不少细节的点需要我们来打磨。 如果需要单独定义一些规则，可以在根目录下新建一个.eslintrc文件，见具体配置。 如果需要忽略一些文件，可以在根目录下新建一个.eslintignore文…

1. 构建速度优化 由于 Loader 对文件的转换操作很耗时，所以需要让尽可能少的文件被 Loader 处理。可以通过 test/include/exclude 三个配置项来命中 Loader 要应用规则的文件。 vue.runtime.esm.js 中只包含运行时的代码。如…

几个月前，我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4。我们的主要目标之一是利用 tree-shaking 的优势，即 Webpack 去掉了实际上并没有使用的代码来减少包的大小。现在，tree-shaking 的好处将根据你的代码库而有所不同。由…

今天我主要分享的是一些 webpack 中的易混淆知识点，也是面试的常见内容。我把这些分散在文档和教程里的内容总结起来，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习

✨满满的干货，不容错过哦. 写文不易，点赞是最大的鼓励。 文章下篇已经更新：深入浅出 Babel 下篇：既生 Plugin 何生 Macros 有点冷清，赞起来。 上图是 Babel 的处理流程, 如果读者学习过编译器原理，这个过程就相当亲切了. 1️⃣词法解析(Lexical…