在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。 说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。…

做自己的轮子，让别人用去吧。 本文灵感源自业务中的经验总结，不怕神一样的产品，只怕一根筋的开发。 在项目打包遇到问题：“当项目托管到 CDN 平台，希望实现项目中的 index.js 不被缓存”。因为我们需要修改 index.js 中的内容，不想用户被缓存。 打包时动态创建 s…

大家好，我是神三元，今天通过一道面试题来和大家聊一聊webpack。 我相信，尽管很多开发者会根据官方文档进行webpack的相关配置，但仍然并不了解Webpack究竟是起什么作用的，在前端工程化扮演者什么角色，观念仍然简单地停留在“代码打包工具”上。真的是这样吗？ 相信这个定…

众所周知，优化一个页面的方法之一就是利用浏览器的缓存机制，在文件名不改变的情况下，使客户端不用频繁向服务端请求和重复下载相同的资源，节约了流量的开销。现在前端的主要构建工具就是使用webpack，现在就说说使用webpack时遇到的hash的坑。

腾讯 AlloyTeam 家校群小分队在 React 移动 web 性能优化的第一阶段经验分享。此文从构建的角度，补充了上一篇《React 移动 web 极致优化》的内容。

在当前的微前端实现中，我们需要通过一系列的技巧去实现。正如上图所示，微前端的公共依赖加载目前并没有非常好的实现方案。然后，Webpack 5中的模块联邦将会改变这一现状。 模块联邦可以去依赖一个远程模块，这个依赖会在运行时生效，并不影响编译时。因此，这个远程依赖的模块就可以是一…

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，…

webpack中 loader 是一个非常重要的概念，loader 可以简单的理解成一个文件处理器，webpack使用 loader 来处理各类文件，比如 .scss转成成 css文件, 小图片转换成base64图片。 本质上讲，loader 只是导出为函数的 JavaScri…

在上篇文章《Webpack源码解读：理清编译主流程》中，大体了解了webpack的编译主流程，其中我们跳过了一个重要内容Tapable。webpack 插件向第三方开发者提供了钩入webpack引擎中的编译流程的方式，而Tapable是插件的最核心基础。 本文首先分析Tapab…