笔者在开发 cli 的过程中，调研流行的 cli 并形成最佳实践，本文旨在用最短的篇幅实现主要功能，揭露核心原理，同时提供 demo 仓库与大家学习探讨。 一个命令，就可以把我预设的完整的工程目录创建好，特别方便效率。 上面雏形脚手架可以很好的服务于个人需求，但是毕竟过于干瘪和…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…

随着单页应用发展的越来越庞大，拆分js就是第一要务，拆分后的js，就可以根据我们需求来有选择性的加载了。 这里就添加了一句，chunkFilename而已，chunkFilename的作用就是用来给拆分后的chunk们起名字的配置项。 还是只打包出了一个main.js，毫无变化…

webpack给前端开发带来了毋庸置疑的改变，它把JS，图片，css都作为模块处理，同时具有开发便捷，自动化，兼容AMD写法等等诸多无须赘述的优点，更令人称道的是其插件社区非常强大，对于不同的业务需求和技术需求社区都有大量插件可供使用。 凡事都具有两面性，许多人说：前端开发再也不…

16个demo，webpack+react搭配使用首先教大家2个新技能 1.按照正常github地址情况下，你的github本身不能访问目录。 例如要访问vue-demo下的vueCpu文件夹:https://github.com/holidaying/vue-demo/vue…

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…

[实践系列] 主要是让我们通过实践去加深对一些原理的理解。 [实践系列]你能手写一个 Promise 吗？Yes I promise。 有兴趣的同学可以关注 [实践系列] 。 求 star 求 follow~ 入口起点(entry point)指示 webpack 应该使用哪个…

前段时间，在公司做了个 Webpack 的分享。听众40多人，感觉还不错。所以总结一下，先看一下ppt的目录： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建…

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