回忆往昔岁月，我做前端开发至今已3年有余，做过的项目大部分都是业务需求迭代，技术优化经验相对较少。去年承蒙leader信任，给予机会开始做公司项目的技术优化。技术优化的首次任务，就是对整体前端项目进行性能优化（编译优化+构建体积优化）。 项目简介：我们团队主要做的是SaaS项目…

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

没有什么比时间更具有说服力了，因为时间无需通知我们就可以改变一切。 Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使…

还在为webpack的配置而烦恼吗？这里有一份webpack从简易到高级版本的配置。还附赠配置地址，你想要吗？不，你不想。老老实实自己配置去吧。 压箱底的笔记而已，大家看看乐乐就好了，这是笔者为了练习webpack而尝试了不同的配置方式，参考了create-react-app的…

你或你的团队编写的源码。 你的源码会依赖的任何第三方的 library 或 "vendor" 代码。 总结： 需要注意的是不同的 devtool 的设置，会导致不同的性能差异。 "eval" 具有最好的性能，但并不能帮助你转译代码。

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。 在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结…

webpack的核心是一切皆模块，所以它其实本质上就是个静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。官网显示的这幅图很形象地描述了这个过程： webpack4…

Webpack 是时下最流行的前端打包工具，它打包开发代码，输出能在各种浏览器运行的代码，提升了开发至发布过程的效率。 你可能已经知道，这种便捷是由 Webpack 的插件系统带来的，但我们今天先把这些概念放在一边，从简单的实践开始，探索 Webpack 打包出的代码是如何在浏…

最近学习了webpack4的使用，并尝试了对项目webpack进行升级和优化，记录一下此次升级的一些实践过程。 项目在2016年引入了webpack作为打包工具，并使用vue-cli搭建build相关的代码，之后再无较大更新。随着项目迭代至今，代码量早已不是当年寥寥的几千行，本…