什么是 Tree Shaking？它是如何工作的？
Tree Shaking 是一种通过静态分析移除未使用代码的优化技术，依赖于 ES6 模块的静态特性。它的核心步骤包括： 静态分析模块依赖关系。 标记未使用的代码。 在生产环境中移除未使用的代码。
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
在 Webpack 中，Loader 和 Plugin 是两个核心概念，它们的作用和使用方式有显著区别。 Loader：用于处理单个文件，将其转换为 Webpack 可以处理的模块。 Plugin：用于扩展 Webpack 的功能，执行更广泛的任务。
配置 Webpack 支持多页面应用（MPA）需要为每个页面设置独立的入口（Entry）和 HTML 模板。 配置 Webpack 支持多页面应用的关键步骤包括： 为每个页面设置独立的入口和 HTML 模板。 使用 html-webpack-plugin 生成 HTML 文件。 动态生成入口配置和插件配置。
配置 Webpack 的开发服务器（DevServer）可以极大地提升开发效率，提供实时重新加载、热模块替换（HMR）等功能。 通过配置 webpack-dev-server，可以快速搭建一个支持实时重新加载、热模块替换的开发环境。主要步骤包括： 安装 webpack-dev-server。 在 webpack.config.js 中配置 devServer 选项。 运行开发服务器。
为了配置 Webpack 支持多种文件类型（如 CSS、图片），需要使用 加载器（Loaders）。加载器允许 Webpack 处理非 JavaScript 文件，并将其转换为有效的模块。 通过配置加载器（Loaders），Webpack 可以支持多种文件类型： CSS：使用 style-loader 和 css-loader。 图片：使用 url-loader 或 file-loader。 字体：使用 file-loader。
