webpack

一枚前端小能手

🚀 Webpack构建等到怀疑人生？试试这几个优化🎯 学习目标：掌握5个Webpack5构建优化技巧，让构建速度提升90%，包体积减少50%📊 难度等级：中级 🏷️ 技术标签：#Webpack5 #构建优化 #开发效率 #性能优化 ⏱️ 阅读时间：约7分钟

拾光拾趣录

模块联邦（Module Federation）微前端方案在你接手的一个大型企业管理系统项目中，前端代码库已经膨胀到难以维护的程度。多个业务团队并行开发，却因为代码耦合严重，经常出现“改A功能影响B功能”的问题。你迫切需要一种方案，既能将系统拆分成独立的子应用，又能实现模块间的高效共享与协作。

萌萌哒草头将军

🚀🚀🚀 Webpack 项目也可以引入大模型问答了！感谢 Rsdoctor 1.2 ！今天发现 Rsdoctor 发布了 1.2 版本预览版本，带来很多功能外还支持 Webapck，所以我们今天来看看更新哪些内容吧！

最爱吃南瓜

JS逆向实战案例之----【通姆】252个webpack模块自吐目标域名： aHR0cHM6Ly93d3cubXR6aC50b3AvbXR6aF9oNS8jL3BhZ2VzL1NlYXJjaFByb2R1Y3RzMi9pbmRleD9zZWFyY2hOYW1lPUE0MTk3JnNlYXJjaFR5cGU9Mg（下文简称通姆）

爱敲代码的小旗

Webpack 5 高性能配置方案下面是一个针对现代Web开发的通用Webpack 5配置方案，经过优化，支持多种框架和技术栈，包含最佳实践和性能优化策略。

桃桃乌龙_9527

受不了了，webpack3.x升级到webpack4.x陈旧项目将node-sass迁移成sass有样式问题，可能是webpack版本的问题，就干脆直接升级得了

深入理解Webpack配置：入口与出口的细节解析在前端工程化开发中，Webpack作为核心构建工具，其配置的正确理解和使用至关重要。本文将深入探讨Webpack配置中入口(entry)和出口(output)的关键细节，特别聚焦路径处理、多入口配置和哈希机制等核心概念，帮助开发者避免常见的配置陷阱。

yuanmenglxb2004

解锁webpack核心技能（二）：配置文件和devtool配置指南webpack 提供的 cli 支持很多的参数，例如 --mode 。在我们平时的开发过程中，我们要学习很多的功能，这些很多都是可以用参数来完成的。那么后边就会导致参数越来越多，我们使用命令特别的不方便，所以我们会使用一种更加灵活的方式---配置文件。

VisuperviReborn

vue2项目升级webpack5项目是基于vue2和webpack3的项目，然后这个项目经过逐年的迭代，代码和文件数量都非常的庞大，开发运行和编译运行的速度都非常的慢，有时候你去吃完饭回来还在运行。

解锁webpack核心技能（三）：从源代码到打包产物编译过程的原理指南当我第一次看到Webpack将一堆零散的文件打包成一个整洁的bundle时，感觉就像在看一场神奇的魔术表演。这个"魔术"的背后，其实是Webpack精妙的编译过程在发挥作用。 Webpack的编译过程就像一条精心设计的流水线，把我们的源代码一步步转化为最终可运行的代码。这个过程主要分为三个关键阶段：

Jet_closer_burning

前端项目工程化配置webpack与vite本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

yuanmenglxb2004

构建工具和脚手架：从源码到dist开发环境 vs. 运行时环境的不一致性工程结构的变化开发时：模块化、依赖关系清晰（import/require）

Webpack 搭建 Vue3 脚手架详细步骤1）初始化项目目录新建一个文件夹，或者使用以下指令2）初始化 npm 项目3）安装 vue 和 webpack 相关依赖

见证历史：Vite 首次超越 Webpack！前端开发领域一个历史性时刻的大事。Vue 和 Vite 的作者尤雨溪，在社交媒体上发了一张图。他只配了简单的文字：“This just happened”（这刚发生）。

Webpack中微内核&插件化思想的应用Webpack 作为现代前端工程化的核心工具，其架构设计充分体现了微内核和插件化的设计思想。通过将核心功能最小化，将复杂的构建逻辑以插件的形式进行扩展，Webpack 实现了高度的可扩展性和灵活性。

从源码到dist：拆解Webpack如何完成前端工程的"基因编译"开发环境 vs. 运行时环境的不一致性工程结构的变化开发时：模块化、依赖关系清晰（import/require）

一个很帅的帅哥

Webpack 和 Vite 的关键区别开发哲学：冷启动速度：热更新（HMR）：配置复杂度：生产环境构建性能：生态系统和兼容性：Webpack 更适合：

2. Webpack 高级配置所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~我们会从以下角度来进行优化：

【工程化】浅谈前端构建工具前端构建工具是辅助开发者将源代码转换为浏览器可直接运行的静态资源的工具集合。随着前端技术的发展，源代码往往包含浏览器无法直接解析的语法（如 TypeScript、Sass）、模块化规范（如 ES Modules、CommonJS）以及需要优化的资源（如未压缩的图片、冗余代码），构建工具通过一系列自动化处理（转译、打包、压缩、优化等），降低开发复杂度并提升应用性能。

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