webpack

Java后端的Ai之路

前端技术Vue-13-安装webpack与vuejs想象一下这样的开发场景：你接手了一个传统的前端项目，打开项目目录，里面躺着几十个HTML文件、上百个JS文件、还有散落各处的CSS样式表。每次新增一个功能，你需要手动在HTML里用<script>标签引入新的JS文件，还要小心翼翼地维护引入顺序——因为A文件依赖B文件的函数，顺序错了页面直接白屏。

Java后端的Ai之路

前端技术Vue-09-webpack-vuejs-实战作为一名前端开发者，你一定经历过这样的场景：项目里有几十个 JavaScript 文件，每个页面都要手动写一堆 <script> 标签，而且顺序还不能错——jQuery 必须在 bootstrap 之前加载，工具函数必须在业务代码之前引入，一旦顺序搞错，控制台立刻报红 Uncaught ReferenceError: $ is not defined。

Webpack迁到Vite第七节（二）：全家桶移除 — Babel 全家桶深度分析本篇定位：Babel 在 Webpack 时期扛着语法转译、API polyfill、helper 去重三座大山。迁移到 Vite 后 esbuild 接手了语法转译，但 polyfill 和 helper 的问题在新架构中怎么解决？本篇逐包拆解四个 Babel 依赖移除的原因，以及 Vite 对应的替代链路。

Webpack迁到Vite第七节（一）：全家桶移除 — 配置文件与构建核心本篇定位：迁移到 Vite，首先消失的是两个配置文件（vue.config.js + babel.config.js）和四个构建核心包（webpack / @vue/cli-service / @vue/cli-plugin-babel / @vue/cli-plugin-eslint）。本篇逐一拆解：它们原来做什么、Vite 中谁替代、替代后发生了什么变化。

Webpack迁到Vite第八节：错误排查实录本篇定位：迁移全过程的「病历本」——11 个真实错误的完整排查链路（现象 → 定位 → 根因 → 修复 → 验证），外加排查方法论（三类错误的本质、通用流程与工具）。遇到迁移相关问题时，从错误对比表反查最快。

Webpack迁到Vite第七节（四）：全家桶移除 — 保留项、脚本与数据收尾本篇定位：依赖从 48 个精简到 40 个（共移除 17 个、新增 9 个，净减 8 个）——留下的每个都有留下的理由。本篇梳理保留原因、脚本命令的对应关系、.eslintrc.js 清理了什么，以及最终的依赖数量、构建时间、配置文件体积的对比数据。

Webpack迁到Vite第五节：第三方库兼容本篇定位：三类无法直接 import 的第三方库适配——UMD 模块（yidun-captcha）、Webpack Bundle（ukjsbridge）、CJS 命名导出缺失（moment）——分别以 Wrapper、Shim、集中封装三种模式驯服，并收束依赖预构建与 CJS 混合模块的构建配置。

Webpack迁到Vite第三节：Less 与 CSS 处理本篇定位：Less 处理链的整体搬迁——style-resources-loader → additionalData、~ 前缀 → Less 编译器插件、品牌色 modifyVars 覆盖、Less 4.x 的 math 变化与 CSS url() 路径。每条链路均从 Webpack 原配置出发，对照 Vite 等价方案。

Webpack迁到Vite第十节：vite.config.js 开发与构建流转全链路本篇定位：第六节逐段解读了 vite.config.js 的每个配置字段「是什么」——那是一本字典。但字典不回答「它们如何协作」：一次开发模式的页面请求，从浏览器发出到模块返回，中间经历了哪些中间件、哪些插件、哪条转换链？一次 npm run build，各插件在哪个钩子执行、产物如何一步步生成？

Webpack迁到Vite第二节：JSX 到 Render 函数本篇定位：项目中仅有的两处 JSX 写法在 Vite 下无法保留（无兼容 Vite 7 的 Vue2 JSX 插件），本篇分析 $createElement 替代方案与优缺点评估——是迁移中改动面最小的专题。

Webpack迁到Vite第一节：模块系统迁移：require → import本篇定位：迁移的第一块基石——Webpack 的 require() 体系（含 require.context）如何替换为 ESM 的 import。从两者打包原理的差异讲起，逐文件拆解改造过程，并给出 Vue 模板中 require() 的兼容结论。

Webpack迁到Vite第四节：SVG 图标系统本篇定位：SVG 图标从 require.context + svg-sprite-loader 到 Vite 虚拟模块的完整演进——技术背景（Sprite）、替代方案、插件代码逐行解析、迁移中遇到的坑（86 次请求、JSON.stringify），以及「为什么自研约 25 行插件而不引入第三方」。

Webpack迁到Vite第六节：构建配置详解（vite.config.js）适用版本：Vite 7.3.6 | @vitejs/plugin-vue2 1.1.2 | @vitejs/plugin-legacy 7.2.1 | vite-plugin-compression 0.5.1 | rollup-plugin-visualizer 6.0.11

webpack 安装笔记：全局 vs 本地，以及一个 PATH 环境变量的坑全局安装：本地安装（官方推荐）：webpack v4+版本，还需要安装CLI：最后package.json添加命令：

liangshanbo1215

面试题：Webpack 的 publicPath 有什么作用？publicPath 决定浏览器请求构建资源时使用的 URL 前缀；path 决定 Webpack 把构建文件保存到哪个本地目录。

liangshanbo1215

Webpack vs Vite 底层原理高频追问的问题Webpack 开发模式以“构建模块依赖图 + Bundle”为核心；Vite 开发模式以“原生 ESM 按需加载 + 依赖预构建”为核心。