webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。 莫慌，我们一点点拆分开看，其实总体的文件就是一个 IIFE——立即执行函数。 函数的入参 mo…

上期通过项目优化分享和实例解析：在淘宝优化了一个大型项目，分享一些干货（代码实例，图文结合），把 webpack 打包优化利器 SplitChunksPlugin 系统讲解了一遍。本期进一步深入，分析 SplitChunksPlugin 源码，搞清楚 webpack 是怎么和 …

本文以剖析webpack-dev-server源码，从零开始实现一个webpack热更新HMR，深入了解webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware的实现机制，彻底搞懂他们的原理，在面试过程中这…

前几个月写的一篇文章，还没在掘金发过。 平时在使用 antd、element 等组件库的时候，都会使用到一个 Babel 插件：babel-plugin-import，这篇文章通过例子和分析源码简单说一下这个插件做了一些什么事情，并且实现一个最小可用版本。 antd 和 ele…

所以只要某一个文件被修改，所有输出文件的hash都会跟着变化；因此它有一个弊端，一旦修改了某一个文件，整个项目的文件缓存都会失效。 webpack的三种hash生成策略都是根据源码内容来生成，只是该源码已经被webpack封装成能在webpack环境中运行的代码了，包含每一个源…

前端的发展，大致的发展路线可以看黄玄的JavaScript 模块化七日谈。从最初的全局污染式的注入到ES6模块化，打包工具的不断迭代替换。主要的原因都是因为前端发展越来越复杂庞大所导致。 本篇文章主要是来谈谈 webpack 在我们平时的开发工作中起到什么作用，以及我们该如何灵…

自从使用了 es6 的模块系统后，各种地方愉快地使用 import export default，但也会在老项目中看到使用commonjs规范的 require module.exports。甚至有时候也会常常看到两者互用的场景。使用没有问题，但其中的关联与区别不得其解，使用起…

随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，…

近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。目前（2020.06.18）snowpack 在 Github 上已经有了将近 1w stars。 snowpack 的代码很轻量，本文会从实现原理的角度介绍 …