几个月前，我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4。我们的主要目标之一是利用 tree-shaking 的优势，即 Webpack 去掉了实际上并没有使用的代码来减少包的大小。现在，tree-shaking 的好处将根据你的代码库而有所不同。由…

通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力。 本文将尝试探索 webpack 插件的工作流程，进而去揭秘它的工作原理。同时需要你对webpack底层和构建流程的一些东西…

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。

在React、Vue这种数据驱动的框架还没盛行的时候，一般我们都是直接在html上写dom结构的，要不就是直接服务端直出，所以我们在下载完html页面后，空白屏的时间是非常短的，因为dom是在html中的，并不是像现在以虚拟dom的方式写在js中，所以，我们不需要等待js下载完…

1. 前言（需求） 就是想读取 *.vue 文件的源码并高亮展示到页面上，又不想用第三方的依赖（其实是找不到）。 2. 实现思路 通过 vue-loader 自定义块 功能，获取目标文件的文件路径，然后通过 fs 读取源码，再用 @vue/compiler-core 的 API…

本系列参考 79 篇文章，总结出 6 篇文章，感谢小伙伴们的支持。 [x] 原理：将现有的 ES6+ 代码，先通过 词法分析 和 语法分析 之后 解析 为 AST，然后将这份 AST 转换 为我们需要形式的 AST，最后将这个 AST 再转换成 ES5 或者期望格式的内容。 […

都 2020 了，不会点 Webpack 好像有点说不过去。 但是事实上如果不是分配到【架构组】之类的团体中，感觉接触 Webpack 的概率会少点吧。 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。 当 Webpa…

webpack目前是前端常用的工程化工具了。它可以帮助我们自动化构建打包各类的资源，极大的提高了我们打包代码的效率。在webpack看来，所有的资源文件都是模块(module),只是处理的方式不同。 建议不要全局安装webpack,因为不同的项目webpack的版本号是不一样的…

本文目的，实现一个可以移除项目中 console.log 的 webpack 插件。借此，我们可以学习一下webpack 插件怎么写。 本来以为比较简单，但还是花了我一个上午的时间。 此时我们运行 yarn build 就会在 dist 目录打包出一个 main.js。我们使用…