webpack

Webpack 简介

Webpack 是一个现代化的 JavaScript 静态模块打包工具，广泛应用于前端工程化开发。它的核心功能是通过分析项目的依赖关系，构建一个依赖图（Dependency Graph），然后将所有模块（如 JavaScript、CSS、图片、字体等）打包成一个或多个优化后的静态资源文件（Bundle）。Webpack 支持代码分割（Code Splitting），允许按需加载模块，提升页面性能；同时提供热更新（Hot Module Replacement, HMR），使开发者能在不刷新页面的情况下实时预览修改效果。

Webpack 的核心概念包括：

• Loader：用于处理非 JavaScript 文件（如 CSS、图片），将其转换为 Webpack 可识别的模块。
• Plugin：扩展 Webpack 功能，如优化代码、压缩资源、生成 HTML 文件等。
• Tree Shaking：移除未使用的代码，减少打包体积。
• Chunk：代码块，可通过动态导入或优化策略拆分，提升加载效率。
• 配置驱动：通过 webpack.config.js 灵活定制打包行为。

Webpack 生态丰富，支持 Babel、TypeScript、Sass 等现代前端工具链，适用于单页应用（SPA）、多页应用（MPA）及微前端架构。