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

今天我主要分享的是一些 webpack 中的易混淆知识点，也是面试的常见内容。我把这些分散在文档和教程里的内容总结起来，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习

它将查找 ./src/index.js 作为默认入口点。 而且，它会在 ./dist/main.js 中输出模块包，目前代码量小，可以格式化看效果 拥有 2 个配置文件在 webpack 中是的常见模式。 webpack4 引入了 production(生产) 和 develo…

tabpable是一个事件发布订阅插件，它支持同步和异步两种；在需要使用的类上继承tabpable，并且该类的构造函数中使用this.hooks添加事件名称。 要使用订阅功能，需要先拿到上面说到的类实例，通过实例对象.hooks.break.tap来订阅。 在需要触发的时机调用…

项目中遇到了需要单独加载某个 markdown 文件显示在页面中，类似于操作指引的感觉，于是找到了 vue-markdown-loader 这个工具，觉得很好用，于是我打算开个专题看一下里面都做了些什么，有助于对 webpack loader 的理解。 这里需要先了解 webp…

字面意思是摇树，项目中没有使用的代码会在打包的时候丢掉。JS 的 Tree Shaking 依赖的是 ES6 的模块系统（比如：import 和 export） 命令行运行 webpack 打包后，打开打包后生成的 /dist/app.bundle.js 文件。查找我们 a()…

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

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

近几年，构建对于前端开发来说是一个很重要的名词，它给前端开发注入了很大的活力，解放了很多生产力。而webpack在前端项目中起了不可小觑的作用，它可以将我们所用的各种浏览器不认识的代码比如es6，es7,sass,less等转换为浏览器认识的语言，可以对文件进行压缩合并，代码进…