随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 的 import() 语法 ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webp…

webpack的熟练使用已成为当代前端工程师必备的生存技能。毋庸置疑，webpack已成为前端构建工具的佼佼者，网络上关于如何使用webpack的技术文档层出不穷。但鲜有能将webpack的构建流程讲清楚的。本文尝试从解读源码以及断点调试的方式，来探究 webpack 是如何一…

1. webpack是干什么的，它如今在前端是一个什么样的地位 这个其实不用多说了，如今的前端项目哪里还有用不到打包工具的呢，而webpack又作为打包工具中的王者我们又有什么理由不去搞明白它呢。 2. commonjs与ES6 Module不应该了解吗 默认导出export …

这里会有选择是 React/Vue/JavaScript，我们统一都先选择 JavaScript。选完后会在项目的根目录下新建一个 .eslintrc.js 配置文件 @babel/parser 是 Babel 中使用的 JavaScript 解析器。

字面意思是摇树，项目中没有使用的代码会在打包的时候丢掉。JS 的 Tree Shaking 依赖的是 ES6 的模块系统（比如：import 和 export） 命令行运行 webpack 打包后，打开打包后生成的 /dist/app.bundle.js 文件。查找我们 a()…