Webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 假设某一天，我们接到了需求，需要开发…

前一段时间我把webpack源码大概读了一遍，webpack 到4.x版本后，其源码已经比较庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。 过度分析源码对于大家并没有太大的帮助。本文主要是想通过分析webpack的构建流程以及实现一个简单的webpack来让大家对we…

解析 webpack 核心流程与插件架构，理解： - Webpack 从启动到输出 bundle，内部逻辑流转过程 - 编写 webpack 插件前，你需要弄清楚哪些问题

本篇将从优化开发体验、加快编译速度、减小打包体积、加快加载速度 4 个角度出发，介绍如何对 webpack 项目进行优化。

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

本文通过精美的图文，深入分析 Webpack Loader 的运行机制，带你吃透 Webpack loader 的 11 个核心问题。

本文从 webpack 是什么、为什么选择 webpack、webpack的基本概念介绍 3个角度进行讲述，从 Webpack 基础着手，和你一起了解 webpack。

在这之前，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展。…

在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。 说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。…