webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。 莫慌，我们一点点拆分开看，其实总体的文件就是一个 IIFE——立即执行函数。 函数的入参 mo…

本文从这 2 个角度出发，收集一些相关优化资料。 resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块，默认是 ['node_modules']。 但是，它会先去当前目录的 ./node_modules 查找，没有的话再去 ../node_mod…

最近在前端论坛闲逛，看到了一些讲parcel、webpack的文章，就突然很好奇，每天都在用的打包工具，他们打包的原理究竟是什么。只有知道了这一点，才可以在众多的打包工具里，找到最适合的那个它。在了解打包原理之前，先花一些篇章说明了一下为什么要使用打包工具。 前端产品的交付是基…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…

随着我们的项目的增长，打包会越来越慢。每次打包都会将第三方的js打包一遍，但是这些第三方的不会经常变化，如何能将第三方的js只打包一次呢？ 我们先将路由组件改成异步组件。官方文档 webpack提供了一个插件 DllPlugin ，用于将不常变动的js单独打包。 这里只需要im…

最近朋友圈被《头号玩家》刷爆了，斯皮尔伯格一个资深电影导演，把对过去经典的致敬，对未来的憧憬浓缩在这一部电影中，可以说让观众燃了起来。 观望整个前端开发，不断的演化，发展迅速。前端开发从最开始切页面, 前端自动化构建工具日新月异，从最初的Grunt,Gulp到现在前端项目可以说…

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

三篇长文带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每…

还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操作流程够了。面试你一般问你webpack的原理，Loader的原理，你有用那些优化措施 前端开发已经模块化…