Webpack 的 Source Map 是什么？如何配置？
Source Map 是一种将转换后的代码映射回原始源代码的技术，主要用于调试和错误追踪。在 Webpack 中，通过 devtool 配置项启用和配置 Source Map。常见的配置选项包括： 开发环境：eval-source-map 或 cheap-module-eval-source-map 生产环境：source-map 或 hidden-source-map
Source Map 是一种将转换后的代码映射回原始源代码的技术，主要用于调试和错误追踪。在 Webpack 中，通过 devtool 配置项启用和配置 Source Map。常见的配置选项包括： 开发环境：eval-source-map 或 cheap-module-eval-source-map 生产环境：source-map 或 hidden-source-map
按需加载（Lazy Loading） 是一种优化技术，通过延迟加载某些模块或资源，减少初始加载时间，提升应用性能。 Webpack 的按需加载可以通过以下方式实现： 动态导入：使用 import() 语法。 React 的 React.lazy 和 Suspense：简化 React 组件的按需加载。 Vue 的异步组件：支持按需加载和加载状态。 路由级别的按需加载：在单页应用中按路由加载组件。 预获取/预加载：通过魔法注释优化资源加载。
Webpack 的热更新（Hot Module Replacement，HMR） 是一种在应用运行时更新模块而无需完全刷新页面的技术。它极大地提升了开发效率，尤其是在调试和开发过程中。 Webpack 的热更新（HMR）通过以下步骤实现： 启动 DevServer 并注入 HMR 运行时。 监听文件变化并重新编译模块。 通过 WebSocket 通知客户端更新。 客户端接收更新并替换旧模块。 执行模块的 HMR 回调，完成更新。
Code Splitting（代码分割） 是一种将代码拆分为多个 bundle 或 chunk 的技术，使得应用可以按需加载这些代码块，而不是一次性加载所有代码。这种方式可以显著减少初始加载时间，提升应用性能。 常见的实现方式包括： 入口起点：手动分离代码。 防止重复：使用 SplitChunksPlugin 自动分离公共模块。 动态导入：使用 import() 按需加载模块。 预获取/预加载：通过魔法注释优化资源加载。 React.lazy 和 Suspense：简化 React 组件的懒加载。
Tree Shaking 是一种通过静态分析移除未使用代码的优化技术，依赖于 ES6 模块的静态特性。它的核心步骤包括： 静态分析模块依赖关系。 标记未使用的代码。 在生产环境中移除未使用的代码。
减少 Webpack 打包体积是优化前端应用性能的关键步骤。 减少 Webpack 打包体积的常用方法包括： 代码分割。 Tree Shaking。 压缩代码。 使用 externals 排除依赖。 按需加载组件库。 压缩图片。 分析打包结果。 压缩资源。 移除未使用的 CSS。 使用 production 模式。 使用更高效的压缩工具。 使用 scope hoisting。
Webpack 的构建性能优化是提升开发效率和减少打包时间的关键。 Webpack 的构建性能优化方法包括： 使用最新版本的 Webpack 和 Node.js。 缩小文件搜索范围。 使用缓存。 多线程/并行构建。 代码分割。 减少构建目标。 使用 DllPlugin 和 DllReferencePlugin。 优化 Source Map。 压缩代码。 使用 HardSourceWebpackPlugin。 减少插件数量。 使用 externals 排除依赖。
编写自定义 Loader 和 Plugin 是 Webpack 高级用法的核心部分。 1. 自定义 Loader 作用：处理文件内容。 实现：导出一个函数，接收文件内容并返回处理后的内容。 配置：在 module.rules 中配置。 2. 自定义 Plugin 作用：扩展 Webpack 功能，操作整个构建过程。 实现：导出一个类，实现 apply 方法，监听 Webpack 生命周期钩子。 配置：在 plugins 中配置。
在 Webpack 中，Plugin 用于扩展功能，执行更广泛的任务，如优化打包结果、管理资源、注入环境变量等。 常用的 Plugin 包括： 生成 HTML：HtmlWebpackPlugin 清理输出目录：CleanWebpackPlugin 提取 CSS：MiniCssExtractPlugin 定义全局常量：DefinePlugin 压缩 JS：TerserPlugin 压缩 CSS：CssMinimizerPlugin 拷贝静态文件：CopyWebpackPlugin 分析打包结果：BundleAnalyzerPlugin 提供全局变量：ProvidePlugin 热模块替换：HotModuleReplacementPlugin 分离第三方库：SplitChunksPlugin 生成 Manifest：WebpackManifestPlugin
在 Webpack 中，Loader 用于处理各种类型的文件，将其转换为 Webpack 可以处理的模块。 常用的 Loader 包括： JavaScript：babel-loader、ts-loader CSS：css-loader、style-loader、sass-loader 图片：file-loader、url-loader 字体：file-loader HTML：html-loader TypeScript：ts-loader Vue：vue-loader 其他：json-loader、markdown-loader、raw-loader
