周一入职，同事JJ让我熟悉一下基于React的新项目。 “咦，yarn是什么鬼？难道npm更高级的替代品？为什么要替代npm？难道有什么好的地方？”，内心一连串的问题冒出来。我就默默的问了一下JJ：“yarn是跟npm一样的东西吗？”，“嗯。”JJ忙碌的敲着键盘，显然这个问题不…

经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样，webpack 能把左侧各种类型的文件（webpack 把它们叫作「模块」）统一打包为右边被通用浏览器支持的文件。webpack 就像是魔术师的帽子，放进去一条丝巾，变出来一只白鸽。那这个「魔术」的过程是…

随着前端工程化的不断发展，构建工具也在不断完善。作为大前端时代的新宠，webpack渐渐成为新时代前端工程师不可或缺的构建工具，随着webpack4的不断迭代，我们享受着构建效率不断提升带来的快感，配置不断减少的舒适，也一直为重写的构建事件钩子机制煞费苦心，为插件各种不兼容心灰…

鲁迅说: 当我们会用一样东西的时候，就要适当地去了解一下这个东西是怎么运转的。 一. 什么是Webpack 二. 写一个简单的Webpack 1. 看一下Webpack的流程图 2. 准备工作 3. 编写 xydpack.js 4. 编写 compiler.js 1. Comp…

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ Plugins：Loaders将各类型的文件处理成webpack能够处理的模块，plugins有着很强的能力。…

查看所有文档页面：全栈开发，获取更多信息。 原文链接：webpack原理，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。 在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解： Entry：入口，Webpack 执行构建的第一步将从 Entr…

以前一直使用create-react-app这个脚手架进行react开发，后面因为一些自定义的配置，转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现，纳尼？怎么文件这么大？？？ 于是研究了一下如何处理webpack打包之后文件太大的情况，简单记录…

在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了4以后，内置了一个一模一样的功能，而且起了一个好听的名字叫“优化” 好了，就写到这里吧，想必大家也看累了吧，辛苦大家了，哈哈。

自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主要的目的就是为了解决这个问题，将所有小文件打包成一个或多个大文件，官网的图片很好的诠释了这个事情，除此之外，Web…