webpack

Webpack系列-Loader在上一篇文章《Webpack系列-Output出口》中，我们详细讲解了Webpack的输出配置。今天，我们将深入探讨Webpack的另一个核心概念——loader。loader就像是Webpack的"翻译官"，负责将各种类型的文件转换为Webpack能够处理的模块。

拉不动的猪

webpack分包优化简单分析“分包” 就是按 “使用时机” 和 “功能” 将代码分割成多个小文件，核心是 “按需加载”，解决传统单包模式下 “体积过大、加载慢” 的问题。

Webpack系列-Output出口在上一篇文章中，我们深入探讨了Webpack的Entry（入口）配置，了解了如何通过单入口、多入口等不同方式定义打包起点。今天，我们将继续Webpack配置之旅，聚焦于另一个核心概念——Output（出口）。

Webpack系列-Entry入口在上一篇文章《Webpack系列-编译过程》中，我们深入探讨了Webpack从初始化到输出的完整编译流程。我们了解到，Webpack的编译过程始于配置的读取和参数的初始化，而这一切的起点正是入口(Entry) 。如果说编译过程是Webpack的心脏，那么入口就是启动这个心脏的起搏器。

用webpack 插件实现 img 图片的懒加载这是一个简化版的图片懒加载插件，使用浏览器原生的 loading="lazy" 属性实现图片懒加载。或使用 yarn：

Webpack系列-编译过程上一篇我们介绍了 Webpack 的基本概念和基础使用，了解到它是一个静态模块打包工具，通过入口、出口、Loader 和插件四大核心概念完成构建工作。这一篇我们将深入 Webpack 的编译过程，按照「初始化→构建依赖图→代码转换→Chunk 分割→优化处理→资源输出」的完整流程，深入拆解 Webpack 的编译细节。

吃饺子不吃馅

【八股汇总，背就完事】这一次再也不怕webpack面试了Webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (static module bundler) 。当 Webpack 处理你的应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

萌萌哒草头将军

尤雨溪宣布 oxfmt 即将发布！比 Prettier 快45倍 🚀🚀🚀尤雨溪宣布，基于 Oxc 的 oxfmt 的代码格式化工具，即将发布，Prettier 快45倍！![尤雨溪推特转存失败，建议直接上传图片文件

weixin_40502337

webpack 学习Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

每日小知识点：10.14 webpack 有几种文件指纹Key： hash：跟整个项目的构建相关。只要项目里有文件更改，整个项目构建的 hash 值都会更改，并且全部文件都共用相同的 hash 值。

街尾杂货店&

webpack - 单独打包指定JS文件（因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改）因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。

jiangzhihao0515

前端自动翻译插件webpack-auto-i18n-plugin的使用一个前端自动翻译插件，支持所有编译成 JS 的前端框架（例如 Vue2/3 和 React）。无需修改源码，通过支持多种翻译服务，一键轻松实现多语言支持！默认集成有道翻译和谷歌翻译，同时支持自定义翻译器，兼容 Webpack、Vite、Rollup 等主流构建工具。

webpack实现常用plugin在 webpack 中， plugin 主要做的事情围绕着整一个构建的过程。基于 tapable 的钩子机制，开发者可以在众多构建环节中注册相关的事件，依托于 webpack 提供的构建上下文，来对打包结果进行一些处理

Webpack 打包优化与骨架屏结合：双管齐下提升前端性能与用户体验Webpack 打包优化与骨架屏结合：双管齐下提升前端性能与用户体验 ** 在前端项目开发与上线过程中，“资源体积大、编译打包慢” 以及 “弱网环境下加载等待焦虑” 是影响用户体验和开发效率的两大核心痛点。针对这些问题，我们通过 Webpack 打包优化与骨架屏技术应用，从技术性能与用户感知两个维度进行突破，最终实现了首屏加载速度与用户体验的显著提升。一、Webpack 打包优化：直击 “体积大、打包慢” 核心痛点 Webpack 作为前端项目构建的核心工具，其打包效率与输出资源体积直接决定了项目的开发

细节控菜鸡

Webpack 核心知识点详解：proxy、热更新、Loader与Plugin全解析大家好～今天来跟大家深入聊聊前端工程化中绕不开的工具——Webpack。作为前端构建工具的扛把子，Webpack 的知识点其实不算少，但掌握核心功能后会发现它真的很强大！本文会重点解析 proxy 跨域、热更新、Loader 和 Plugin 这几个高频考点，最后再聊聊如何用 Webpack 优化前端性能，新手友好，建议收藏～ 😊

dcloud_jibinbin

【uniapp】体验优化：开源工具集 uni-toolkit 发布最近在做一些 uniapp 小程序相关的体积优化和功能补充工作，写了几个插件觉得太分散，不好梳理和归类，于是就创建一个 github 组织来整理我的一些工具和插件，一方面方便我的日常工作，另一方面可以搜集来自社区的想法或者建议，可以首先考虑加到 uniapp 官方仓库中，不方便加的再通过插件等形式实现。

理解 Webpack 的构建过程(实现原理)，并实现一个 mini 版如果把 webpack 当成是一个函数的话，这个函数的功能就是将项目的各种文件转换成一个或多个浏览器可以直接使用的文件。转换的规则就是 webpack 的配置文件。所以函数的输入就是配置文件，函数的输出就是打包后的文件。函数的内部实现就是 webpack 的构建过程。 webpack 很像是一个搬家公司的打包服务，你把你的东西（各种文件）交给 webpack，webpack 就会把你的东西打包成一个或多个包裹（浏览器可以直接使用的文件）。

Webpack 模块联邦（Module Federation）模块联邦（Module Federation）是 Webpack 5 推出的一个革命性功能，它让多个独立构建的项目可以共享代码或组件，甚至在运行时动态加载对方的模块。

小小前端_我自坚强

2025Webpack、Vite、Rollup详解在现代前端开发中，构建工具扮演着至关重要的角色。它们负责将我们编写的代码转换、打包、优化，最终生成可以在浏览器中运行的文件。Webpack、Vite 和 Rollup 是当前最流行的三种构建工具，每种都有其独特的优势和适用场景。本文将深入探讨这三种构建工具的原理、特点和使用方法。