1. Webpack 的核心概念与作用
- 作用：Webpack 是一个静态模块打包工具，通过构建依赖关系图（Dependency Graph），将项目中的模块（JS、CSS、图片等）打包成一个或多个优化后的文件（Bundle），支持代码分割、按需加载、资源优化等功能。
- 核心概念：
- Entry：入口文件，Webpack 构建的起点（如
./src/index.js）。 - Output：输出配置，定义打包文件的路径和名称（如
./dist/main.js）。 - Loader：处理非 JS/JSON 文件（如 CSS、Less、图片），将其转换为模块（例如
babel-loader转换 ES6 语法）。 - Plugin：扩展 Webpack 功能，如代码压缩、生成 HTML 模板（如
HtmlWebpackPlugin）。 - Chunk：代码块，由多个模块组成，用于代码分割和按需加载。
- Entry：入口文件，Webpack 构建的起点（如
2. Webpack 的构建流程
- 初始化参数：合并配置文件和命令行参数。
- 开始编译：创建
Compiler对象，加载插件，执行run方法启动编译。 - 确定入口：根据
entry配置找到所有入口文件。 - 编译模块：递归处理入口文件的依赖链，调用 Loader 转换代码（如将 Less 转为 CSS）。
- 生成依赖图：完成所有模块编译后，形成模块间的依赖关系图。
- 输出资源：将依赖图分割为多个 Chunk，生成最终文件并输出到
output路径。
3. Loader 与 Plugin 的区别
-
Loader：
- 功能：处理非 JS 文件（如 CSS、图片），将其转换为 Webpack 可识别的模块。
- 运行时机：在编译阶段执行，链式调用（从右到左）。
- 常见 Loader：
babel-loader：转换 ES6+ 语法为 ES5。css-loader：解析 CSS 文件的依赖关系。file-loader：处理文件资源（如图片）。
-
Plugin：
- 功能：扩展 Webpack 功能，例如代码压缩、资源管理。
- 运行时机：在整个构建生命周期中监听事件（如
emit事件在输出前触发）。 - 常见 Plugin：
HtmlWebpackPlugin：自动生成 HTML 并注入打包后的资源。MiniCssExtractPlugin：将 CSS 提取为独立文件。TerserPlugin：压缩 JS 代码。
4. Webpack 优化手段
前端性能优化：
- 代码压缩：
- JS 压缩：
TerserPlugin删除注释、空格和未使用代码。 - CSS 压缩：
CssMinimizerPlugin优化样式文件。
- JS 压缩：
- Tree Shaking：基于 ES Module 静态分析，剔除未使用的代码（需设置
mode: 'production'）。 - 代码分割：
- 动态导入：使用
import()语法实现按需加载。 SplitChunksPlugin：提取公共代码（如第三方库）。
- 动态导入：使用
- 缓存优化：文件名添加哈希值（如
[contenthash]），利用浏览器缓存。
构建速度优化：
- 缓存 Loader：使用
cache-loader缓存编译结果。 - 多线程编译：
thread-loader或HappyPack加速 Loader 处理。 - DLL 预编译：通过
DllPlugin预打包不常变更的库（如 React、Lodash）。 - 缩小文件范围：配置
exclude或include减少不必要的文件处理。
5. Webpack 与其他构建工具对比
| 工具 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Webpack | 功能全面，支持复杂配置和代码分割 | 配置复杂，构建速度较慢 | 大型单页应用（SPA） |
| Rollup | Tree Shaking 效果更好，输出文件更小 | 对动态导入和 CSS 支持较弱 | 类库或组件开发 |
| Parcel | 零配置，构建速度快 | 扩展性差，插件生态较弱 | 快速原型开发或小型项目 |
6. 热更新（HMR）与 Source Map
- HMR：
- 原理：仅替换修改的模块，无需刷新页面，保留应用状态。
- 配置：在
devServer中启用hot: true，并引入HotModuleReplacementPlugin。
- Source Map：
- 作用：映射编译后代码与源码，便于调试。
- 推荐配置：
- 开发环境：
cheap-module-eval-source-map（快速生成，包含行信息）。 - 生产环境：
cheap-module-source-map（不暴露源码）。
- 开发环境：