12 2022 档案
摘要：先简单回顾下 webpack 原理 Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏
阅读全文
摘要：前言 当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。 目录 缩小范围 noParse IgnorePlugin 优化 resolve 配置 externals 缓存 缩小范围 在配置 loader 的时候，我们需要
阅读全文
摘要：前言 本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。 一、基础配置 接下来一起配置一个基础的 Webpack。 将支持以下功能： 分离开发环境、生产环境配置； 模块化开发； sourceMap
阅读全文
摘要：自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。 探索webpack的高级特性 特性：treeShaking 顾名思义treeShaking，就是摇树，那么体现在代码模块里面就是摇掉那些没有
阅读全文
摘要：前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。 一、准
阅读全文
摘要：引言 围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。 所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。 今天，我们来聊聊 Webpack 中必不可少的
阅读全文
