我们可以使用懒加载的方式引入模块，比如说当触发了某个条件，在通过import的方式引入模块。这样可以使得项目的性能会更加的好。 同样的路由懒加载的意思，表示当我们监听到路由变化了，才会去引入对应的页面模块。 Shimming：在打包过程中，有时候需要对代码兼容。这种兼容不局限于…

相信大家对webpack也有一定的了解，其实深入浅出webpack这本书也看了很多遍，每一次看都会有一些细节之前没有注意到，我觉得其实可以把它当成是一本工具书来看，之前我也是只看配置都有点让你看不过来，更别说其他的了。 所以今天我就说一下如何编写一个loader与plugin，…

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 …

带你深度解锁Webpack系列(基础篇) 和 带你深度解锁Webpack系列(进阶篇)，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。 本文罗列出了十多种优化方式…

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

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

webpack在启动后，会根据Entry配置的入口，递归解析所依赖的文件。这个过程分为搜索文件和把匹配的文件进行分析、转化的两个过程，因此可以从这两个角度来进行优化配置。 1. resolve字段告诉webpack怎么去搜索文件，所以首先要重视resolve字段的配置： res…

在前面一篇文章中 《模块化系列》彻底理清 AMD,CommonJS,CMD,UMD,ES6，我们可以学到了各种模块化的机制。那么接下里我们就来分析一下 webpack 的模块化机制。（主要讲 JS 部分） 提到 webpack，可以说是与我们的开发工程非常密切的工具，不管是日常…

在之前的文章中，我们了解到了webpack的打包机制和loader，loader 用于转换某些类型的模块，而plugin则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。插件目的在于解决 loader 无法实现的其他事。所以我们很有必要探究一下webpack…