webpack

vue2 webpack 部署二级目录、根目录nginx配置及打包配置调整二级目录abc ，打包vue.config.js中的 publicPath需设置为 "/abc/"

一文分清前端常用包管理器以及构建工具在前端工程化的浪潮中，包管理工具和构建工具是项目的基石。本文将深入剖析 npm、pnpm、yarn（包管理工具）与 vite、webpack（构建工具）的核心差异，帮助开发者在不同场景下做出最优选择。

炫饭第一名

Vue 2.5.16 + Webpack 4 升级 Vue 2.7.16 + Webpack 5 记录本次升级是将一个基于 Vue 2.5.16 + Webpack 4 的项目升级到 Vue 2.7.16 + Webpack 5，主要涉及：

前端救急实战：用 patch-package 解决 vue-pdf 电子签章不显示问题摘要：本文以 vue-pdf 渲染电子签章失效的典型问题为例，结合社区真实案例，手把手教你使用 patch-package 修改第三方库源码并生成持久化补丁。无需等待官方更新，快速修复线上 Bug！

Webpack插件开发深度指南：从原理到实战Webpack插件是前端工程化的核心引擎，本文将带你深入插件开发全流程，实现一个功能完整的资源清单插件，并揭示Tapable事件系统的核心原理。

webpack相关Webpack 的核心功能通过配置文件（默认 webpack.config.js）定义，配置文件是一个导出对象的 JavaScript 模块。以下是关键配置项及用法：

伍哥的传说

Webpack5 新特性与详细配置指南内置 Asset Modules（资源模块）持久化缓存（Persistent Caching）Tree Shaking 更彻底

半桶水专家

webpack和vite对比Webpack 和 Vite 是当前前端项目常用的构建工具，它们都可以实现模块打包、代码分割、热更新等功能，但它们的设计理念和实现机制有明显不同。下面从多个角度对比两者：

今天也在写bug

webpack中SplitChunks的分割策略分割策略的科学依据：取舍边界：不拆分：小于10KB的库（如axios）→ 合并入业务代码减少请求数强制拆分：超过100KB的图表库（如echarts）→ 独立chunk避免阻塞渲染

webpack高级配置进行 Webpack 优化，让代码在编译或者运行时性能更好如果代码编写出错了，在浏览器查看错误并且需要定位的时候，查看的是编译后的代码，难以定位具体的错误位置

豆豆（设计前端）

解决Vue页面黑底红字遮罩层报错：Unknown promise rejection reason (webpack-internal)vue前端页面弹出黑底红色报错遮罩层报错：具体报错信息：原因：当出现编译错误或警告时，在浏览器中显示全屏覆盖。解决方法：

拾光拾趣录

Webpack性能优化：10个杀手级提速技巧2025年最新统计数据显示，优化后的Webpack构建速度平均提升300%，大型项目冷启动时间从48秒降至8秒！本文将分享真实项目验证的高效优化策略

燃烧的土豆

React 18 全局错误捕获 + React-router 6 动态权限路由前几天搭建了基础的react项目模版从零搭建 react 模板【React 18 + Webpack 5 + Antd 5 + React-Router 6 】,准备进行进一步完善

模块联邦模块联邦，这个名字也挺奇怪的，我感觉叫动态引用更合适，有点像动态库 .so 的这种感觉。直接依赖远程 js，其映射关系为供给方生成的一个 js，用于查找其库的真实地址。

拾光拾趣录

Vite 与 Webpack 热更新原理当 1000+ 模块的项目热更新耗时从 20s 降至 50ms，背后的架构如何重塑前端开发体验？性能瓶颈：依赖图谱越大，C→D→E 阶段耗时指数级增长（实测 1000 模块项目平均耗时 1.8s）

天天进步2015

前端工程化：Webpack从入门到精通Webpack是现代JavaScript应用程序的静态模块打包工具。当Webpack处理应用程序时，它会在内部构建一个依赖图，映射项目所需的每个模块，然后生成一个或多个bundle。

TypeScript-webpack随着前端工程化的不断演进，使用 TypeScript 编写更加健壮、可维护的代码已成为主流趋势。而 Webpack 则是目前最流行的模块打包工具之一，它可以帮助我们将多个模块、资源文件进行打包压缩，适用于大型项目开发。

webpack基础官网：https://webpack.js.org/ 中文文档：https://www.webpackjs.com/concepts/

webpack+vite前端构建工具 -11实战中的配置技巧打包命令打生产包命令：npm run build 结果本地项目启动命令：npm run dev前端项目按照不同的环境划分不同的配置，按照不同的脚本进行打包。理解平时npm run build，npm run dev的本质。

拾光拾趣录

Webpack 打包中的 Hash 生成机制在 Webpack 构建过程中，hash 值扮演着关键角色，它帮助我们实现高效的缓存策略和精准的版本控制。本文将深入探讨 Webpack 如何生成各种类型的 hash，以及如何在实际项目中合理应用它们。