公司的前端项目使用Vue框架，Vue框架使用Webpack进行构建，随着项目不断迭代，项目逐渐变得庞大，然而项目的构建速度随之变得缓慢，于是对Webpack构建进行优化变得刻不容缓。经过不断的摸索和实践，通过以下方法优化后，项目的构建速度提高了50%。现将相关优化方法进行总结分…

今天学习 webpack 4，希望没学错版本。 学习材料是官方文档。 1. webpack 介绍 webpack 是一个模块打包工具，从一个入口模块开始，生成依赖图。最后把整个项目打包成多个浏览器可用的文件。 用 npm 安装即可，安装到开发版本。 webpack 4 版本还需…

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

webpack官网的首屏图片就已经很清楚的描述了他的工作原理，这里我们来简单理解一下webpack打包的核心工作过程。 我们以一个普通的前端项目为例，在我们的项目中一般都会散落着各种各样代码及资源文件，webpack会根据我们的配置找到其中的一个文件作为打包的入口，一般情况这个…

声明：本篇文章基于webpack v4.43.0，如按照文中代码执行报错，请检查依赖模块版本是否和示例代码仓库中一致。 *温馨提示：*本篇内容更偏实战，涉及大量代码，如有代码密集恐惧症的老爷，请速速离场。 在上一篇的内容中，介绍了webpack的核心概念以及常用的核心配置，并尝…

声明：本篇文章基于webpack v4.43.0，如按照文中代码执行报错，请先检查依赖版本是否和示例代码仓库中一致。 自Web2.0以来，前端技术日益蓬勃发展，前端仔们不再满足于切切页面、写写动画，而是能够做更多"高大上"的事情了。但随着项目规模和复杂度的提升，代码的依赖维护、…

海阔凭鱼跃，天高任鸟飞。Hey 你好！我是秦爱德。😄 上篇文章，介绍了webpack的入门基础配置（传送门🚀🚀🚀）。那现在我们就来讲一讲如何通过优化配置项来提高我们的项目构建性能吧。 从项目实战角度出发，我们更关心的还是从项目开发到发布上线。所以优化项可以分为以下几个维…

如今，CLI工具（如create-react-app或Vue -cli）已经为我们抽象了大部分配置，并提供了合理的默认设置。 即使那样，了解幕后工作原理还是有好处的，因为我们迟早需要对默认值进行一些调整。 在本文中中，我们会知道 webpack可以做什么，以及如何配置它以满足我…

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