标签： webpack

发布于

JS `Webpack` `Compiler` / `Compilation` 生命周期钩子：自定义打包流程

各位观众老爷，晚上好！我是你们的老朋友，今天咱们聊点硬核的——Webpack Compiler/Compilation 生命周期钩子，教你玩转自定义打包流程，让Webpack给你打工！ 开场白：Webpack，你可真是个小机灵鬼！ Webpack这玩意，用起来方便是真方便，但如果你想深入了解它到底在背后搞些什么，那就得好好研究它的生命周期钩子了。这些钩子就像一个个关键的“时间节点”，允许你在Webpack打包过程中的特定时刻插入你的代码，改变它的行为，实现各种骚操作。 第一幕：Compiler vs Compilation，傻傻分不清楚？ 在开始之前，我们先来捋清楚两个概念：Compiler 和 Compilation。 Compiler（编译器）： Webpack 的核心引擎，负责启动整个编译流程。你可以把它想象成一个项目经理，负责分配任务、协调资源。Compiler 实例只会在启动 Webpack 时创建一次，贯穿整个构建过程。 Compilation（编译）： 代表一次打包的过程。当 Webpack 检测到文件变更，需要重新打包时，就会创建一个新的 Compilation 实例。 …

继续阅读“JS `Webpack` `Compiler` / `Compilation` 生命周期钩子：自定义打包流程”

发布于

Webpack/Vite：前端构建工具与模块打包

前端世界的“变形金刚”：Webpack 与 Vite 各位前端的探险家们，大家好！ 有没有觉得前端的世界就像一个乐高积木盒，各种各样的模块、组件、资源，散落在各个角落，让人眼花缭乱？而我们，就像是乐高大师，需要把这些零散的积木，拼装成一个功能完善、外观精美的作品。 不过，如果让我们一块一块地手动拼装，那可就太费劲了。想象一下，几千个、甚至几万个积木，一个个地连接、排列，恐怕还没拼好，就累趴下了。这时候，我们就需要一些“变形金刚”来帮忙，它们能自动把这些积木进行整理、组合、优化，最终变成我们想要的形态。 而今天我们要聊的，就是前端世界里的两款重量级“变形金刚”：Webpack 和 Vite。它们都是前端构建工具，专门负责模块打包，可以将各种前端资源（JavaScript、CSS、图片等等）打包成可以在浏览器中运行的文件。 Webpack：老牌劲旅，功能强大 Webpack 可以说是前端构建工具界的“老大哥”了。它诞生于2012年，经历了前端技术的飞速发展，依然屹立不倒，可见其生命力之顽强。 你可以把 Webpack 想象成一个经验丰富的建筑师，它对各种建筑材料（模块、资源）都了如指掌，能 …

继续阅读“Webpack/Vite：前端构建工具与模块打包”

发布于

前端构建工具：Webpack/Vite 基础与模块打包

前端构建工具：Webpack/Vite 基础与模块打包：一场代码的“变形记” 各位前端的同僚们，咱们今天聊聊前端开发中那些“幕后英雄”——构建工具。你是不是也遇到过这样的情况：辛辛苦苦写了一堆模块化的 JavaScript 代码，满心欢喜地丢到浏览器里，结果浏览器一脸懵逼，告诉你“Uncaught SyntaxError: Unexpected token import”。别慌，这锅得构建工具来背！ 想象一下，你写了一桌子好菜，色香味俱全，但是直接端给客人，客人没法下嘴，因为菜是生的，食材没处理，摆盘也一塌糊涂。这时候，就需要一位专业的“厨师”——构建工具，把你的代码进行加工、烹饪、摆盘，最终端出一道浏览器能“吃”的美味佳肴。 前端构建工具的作用就是如此，它能将各种各样的前端资源（JavaScript、CSS、图片、字体等等）进行处理、打包，让它们能够高效、稳定地运行在浏览器中。其中，Webpack 和 Vite 就是两位“明星厨师”，各自拥有独特的“烹饪”技巧。 Webpack：经验老道的“老厨师” Webpack 可以说是前端构建工具界的“老前辈”了，经验丰富，功能强大，几乎没有它 …

继续阅读“前端构建工具：Webpack/Vite 基础与模块打包”

发布于

自定义 Webpack Loader 与 Plugin 开发：实现定制化打包逻辑

好的，各位观众老爷，大家好！我是你们的老朋友，人称“打包小王子”的程序员阿飞。今天咱们要聊点硬核的，但保证用最通俗易懂的方式，把Webpack Loader和Plugin的开发讲得明明白白。 开场白：Webpack，前端界的变形金刚 Webpack，这名字听起来就很有科技感。说白了，它就像前端界的“变形金刚”，能把各种乱七八糟的文件（JS、CSS、图片、字体…）都变成浏览器能看懂的东西。它能把这些文件打包、压缩、优化，让你的网站跑得飞快。 但是，Webpack毕竟是个通用工具，它不可能满足所有人的需求。就像变形金刚也有不同的型号，需要根据不同任务进行定制。所以，我们就需要用到Webpack的两个超级武器：Loader和Plugin。 第一部分：Loader，代码界的“翻译官” 想象一下，你写了一段很时髦的ES6代码，但是老旧的浏览器看不懂怎么办？这时候就需要Loader出马了！ 1. 什么是Loader？ Loader本质上就是一个函数，它接收一个文件的内容作为输入，经过处理后，输出新的内容。你可以把它想象成一个“翻译官”，把各种文件“翻译”成Webpack能理解的模块。 例如： ba …

继续阅读“自定义 Webpack Loader 与 Plugin 开发：实现定制化打包逻辑”

发布于

Webpack 打包优化：代码分割、Tree Shaking 与资源压缩

好的，各位靓仔靓女们，今天我们来聊聊Webpack打包优化这事儿！🚀 别害怕，虽然听起来像是个技术怪兽，但只要掌握了正确的姿势，它也能变成你的得力小助手！ 开场白：打包，一个前端er的日常 话说啊，咱们前端er每天辛辛苦苦码代码，写完一堆JS、CSS、图片，就像辛勤的蜜蜂酿蜜一样。但是，浏览器可不认得你写的那些模块化、组件化的东西，它只认得一个大大的、丑丑的、臃肿的文件。这时候，Webpack就闪亮登场了！它就像一个神奇的打包工，把你的代码变成浏览器能直接使用的东西。 但是！重点来了，如果我们不加任何优化，Webpack打出来的包，往往会像一个塞满了各种东西的旅行箱，沉重无比，加载速度慢到让人想砸电脑。😩 所以，优化Webpack打包，就成了我们前端er必须要掌握的技能！ 今天，我们就来重点聊聊Webpack打包优化的三大法宝：代码分割、Tree Shaking 和资源压缩。 第一章：代码分割，化繁为简的艺术 想象一下，你有一个巨大的图书馆，里面塞满了各种各样的书籍。如果每次有人要借书，你都要把整个图书馆搬过去，那得累死个人！代码分割就像是把这个图书馆分成不同的区域，比如小说区、科技区 …

继续阅读“Webpack 打包优化：代码分割、Tree Shaking 与资源压缩”