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

2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…

在webpack打包的过程中有没有想过这其中的打包过程是怎么样的呢？有没有什么办法能反映出这个打包的过程和结果呢？webpack打包太慢需要优化怎么办呢？或许以下这几款插件能帮助到你，记得点个赞哈哈。 这款插件能把打包的进度以进度条的形式显示出来，同时也可以自定义显示百分比的格…

在官方定义中，Webpack 是一个现代 JavaScript 应用静态模块打包器。它统一了 JavaScript 在发展过程中出现的各种模块化方案，我们可以认为 Webpack 是 JavaScript 模块化的统一解决方案。 如果有对 JavaScript 各种模块化方案还…

1. 区分 开发 / 生产环境 webpack-merge 开发环境时 一些工具的使用是没有意义的，比如 压缩代码、文件名哈希、分离代码等... 2. 配置 source map 3. 摇树优化 Tree Shaking 4. 作用域提升 Scope Hoisting 5. 启…

ES6前，js没有属于自己的模块规范，所以社区制定了 CommonJS规范。而NodeJS所使用的模块系统就是基于CommonJS规范实现的。 根据当前运行环境的判断，如果是 Node 环境 就是使用 CommonJS 规范， 如果不是就判断是否为 AMD 环境， 最后导出全局…

说起路由懒加载，大家很快就知道怎么实现它，但是问到路由懒加载的原理，怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载，最常用的是通过import()来实现它。 然后通过Webpack编译打包后，会把每个路由组件的代码分割…

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

这篇文章主要是通过源码去探索下 webpack 是如何通过在编译环节创建的 module graph 来生成对应的 chunk graph。 我们都知道 webpack 打包构建时会根据你的具体业务代码和 webpack 相关配置来决定输出的最终文件，具体的文件的名和文件数量也…