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

查看所有文档页面：全栈开发，获取更多信息。 原文链接：webpack原理，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。 在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解： Entry：入口，Webpack 执行构建的第一步将从 Entr…

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 1. 打包的主要流程 2. 打包过程的步骤 3. 实现打包的步骤 4. 代码

如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js…

vue + element-ui 使用 babel-plugin-component 来实现按需加载组件及样式。 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 找到引入 element-ui 的类型为 ImportDe…

经过初探代码编译一系列文章[公众号：前端小菜鸟001]的介绍与实践，大家应该对 compiler [编译器]的实现与执行过程有了一定的认识与理解了。 下面我们来进一步探究一下 编译器是怎么实现不同语言之间的转换的。 为了更明白更清晰的理解 编译器是怎么实现语言A转换成语言B 的…

文章具有翻译向，具体的可以看文末的链接。 随着ES6的正式发布，以及ES2016、ES2017...每年的稳定更新，还有新提案的不断出现，使得JavaScript越来越成熟。但是对于一些新的语法和API，老版本的浏览器无法全面兼容。babel的出现，解决了在老版本浏览器使用新语…

上一篇总览 我们介绍了 webpack 整体的编译过程，这次就来分析下基础的 Tapable。 webpack 整个编译过程中暴露出来大量的 Hook 供内部/外部插件使用，同时支持扩展各种插件，而内部处理的代码，也依赖于 Hook 和插件，这部分的功能就依赖于 Tapable…

babel-loader是依赖babel的，需要在项目中使用babel的配置文件.babelrc。 在项目根目录配置.babelrc文件。.babelrc是一个json格式的文件，其中主要是对presets和plugins进行配置。plugins是告诉babel要使用那些插件，…