一、基础概念
1、Webpack 是什么？
Webpack 是前端模块化打包工具，能把项目里的 JS、CSS、图片、Vue/React 组件等资源，打包成浏览器能识别的静态文件，同时处理模块依赖、做兼容转换和性能优化
2、Webpack 五大核心概念
- Entry：打包的入口文件，从这里开始分析依赖
- Output：打包产物的输出位置和文件名
- Loader：处理 Webpack 不认识的非 JS 文件
- Plugin：扩展打包流程，做优化、生成文件等功能
- Mode：区分开发 / 生产环境，自动启用对应优化
3、Webpack 和 Vite 核心区别
-
Webpack：启动时要全量打包，项目变大后构建和热更新会变慢
-
Vite：开发环境基于 ESM 不打包、按需编译 ，热更新速度远快于 Webpack
二、Loader / Plugin（最高频）
1、Loader 和 Plugin 区别
- Loader 是文件转换器，只负责把非 JS 文件（CSS、Vue、图片）转成 Webpack 能处理的模块
- Plugin 是流程扩展器 ，介入整个打包生命周期，做压缩、生成 HTML、清理目录等全局功能
2、常用 Loader 及作用
- babel-loader：把 ES6+ 转成 ES5，兼容低版本浏览器
- css-loader：解析 CSS 文件里的导入和路径
- style-loader：把解析后的 CSS 插入到页面标签中
- vue-loader：处理 .vue 单文件组件
- url-loader：小图片转 base64，大图片单独打包
3、常用 Plugin 及作用
- HtmlWebpackPlugin：自动生成 HTML 并引入打包后的 JS/CSS
- CleanWebpackPlugin：打包前清空 dist 目录
- MiniCssExtractPlugin：把 CSS 抽成独立文件
- TerserPlugin：压缩生产环境的 JS 代码
4、Loader 执行顺序
执行顺序固定：从右往左，从下往上，后面的 loader 先处理文件
三、入口 / 输出 / 开发服务
1、Entry 有几种配置？
- 字符串：单入口，用于单页面应用
- 对象：多入口，用于多页面应用，每个页面对应一个入口
2、hash /chunkhash/contenthash 区别
- hash：整个项目任何文件改动，哈希值就变
- chunkhash：当前代码块内容变了，哈希值才变
- contenthash：只有文件本身内容变了，哈希值才变，生产环境最常用
3、devServer 作用： 启动本地开发服务器，支持热更新，还能配置代理解决开发时的跨域问题
四、代码分割 & 多入口
1、什么是多入口？
给多页面项目配置多个打包起点，每个页面单独打包出自己的 JS，访问时只加载当前页面的代码，不加载无关内容
2、什么是代码分包（Code Splitting）？
把打包后的大文件拆成多个小文件，实现按需加载，同时抽离公共代码，减小首屏加载体积
3、多入口和分包的区别？
- 多入口：从打包源头拆分，针对多个页面
- 分包：对打包结果拆分，抽公共代码、拆大文件两者经常配合使用，先分入口再抽公共代码
4、splitChunks 作用？
专门用来抽离公共代码，把第三方库（Vue、axios）和业务公共工具函数单独打包，避免重复打包
五、优化（必考）
1、Webpack Tree Shaking 原理
简单来说有三种：
- usedExports：静态分析时，删掉导入了但没使用的代码
- sideEffects：删掉模块里导出了但没被引用的变量
- dead code elimination：最终打包时，彻底清理这些死代码
2、如何提升打包速度？
- 开启 Webpack 缓存，二次构建更快
- 排除 node_modules，不编译第三方依赖
- 使用多进程 loader，利用 CPU 多核加速
- 开发环境不启用压缩、抽离 CSS 等重型插件
3、如何减小打包体积？
- 用 splitChunks 抽离公共代码
- 路由 / 组件懒加载，按需加载
- 压缩 JS、CSS 代码
- UI 组件库按需引入
- 小图片转 base64，减少请求
- 开启 Tree Shaking 删除无用代码
六、高频其他
-
什么是热更新（HMR）？ 代码修改后，只更新改动的模块，不刷新整个页面，保留页面原有状态，大幅提升开发效率。
-
Webpack 构建流程读取配置 → 从入口分析依赖 → 用 Loader 编译文件 → 用 Plugin 扩展优化 → 输出打包产物到 dist。
-
**打包后路径错误怎么办？**配置 output.publicPath，根据部署环境设置正确的公共路径，就能解决资源引用失败的问题。