以实战采坑验证的方式分析以 webpack 为基础的构建工具项目中环境变量 process.env 动态替换方案的具体过程。

为了更好的理解webpack 编译原理， 来写一个 类似webpack的bundler打包工具。 话不多说，直接开始 ⬇️⬇️⬇️ 1. 建立文件结构 bundler.js src/index.js

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。本文主要介绍一下Tapable中的钩子函…

随着前端工程化的不断发展，构建工具也在不断完善。作为大前端时代的新宠，webpack渐渐成为新时代前端工程师不可或缺的构建工具，随着webpack4的不断迭代，我们享受着构建效率不断提升带来的快感，配置不断减少的舒适，也一直为重写的构建事件钩子机制煞费苦心，为插件各种不兼容心灰…

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

0. 背景 随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的…

继上一篇 一步步从零开始用 webpack 搭建一个大型项目 之后的第二篇。本文使用了 webpack5 将项目进行了重构，并全程使用的 webpack-chain 来配置 webpack，每个功能也都是独立文件，可单独使用。因此该项目的配置可以在任何项目中被使用。此项目可实战…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…

将静态资源文件（运行依赖包）与源文件分开打包，先使用DllPlugin给静态资源打包，再使用DllReferencePlugin让源文件引用资源文件。