webpack

webpack 是一个开源的 JavaScript 模块打包工具（module bundler），其核心目标是将项目中分散的模块（JavaScript 文件、CSS、图片、字体等）按照依赖关系打包成浏览器可直接加载的静态资源。它广泛应用于现代前端工程化开发中，尤其适合大型单页应用（SPA）和多页面应用（MPA）的构建。

核心功能

• 模块打包：支持 CommonJS、ES Module、AMD 等模块规范，自动解析模块依赖并生成优化后的 bundle 文件。
• 代码分割：通过动态导入（dynamic import）实现代码懒加载，减小首屏加载体积。
• 资源转换：借助 Loader 机制，可处理 TypeScript、Sass、Less、图片、字体等非 JavaScript 资源。
• 插件系统：提供丰富的插件接口，支持压缩、提取 CSS、注入环境变量、生成 HTML 等扩展功能。
• 开发服务器：内置 webpack-dev-server，支持热模块替换（HMR）、实时重新加载，提升开发效率。

适用人群

• 前端开发者：需要构建复杂单页应用的工程师。
• 团队协作项目：对构建性能、代码可维护性有较高要求的项目。
• 学习模块化与构建工具：希望深入理解前端工程化原理的开发者。

使用方式

webpack 通常通过 Node.js 和 npm 安装，命令为：npm install --save-dev webpack webpack-cli。使用时需要编写配置文件 webpack.config.js，指定入口（entry）、输出（output）、Loader 和插件等。也可以使用零配置模式快速开始。社区提供了大量官方和第三方插件，可按需集成。

注意事项

• webpack 本身专注于模块打包，不包含 UI 组件或路由功能，需配合框架（如 React、Vue）使用。
• 配置复杂时，建议参考官方文档或使用脚手架工具（如 create-react-app、Vue CLI）简化配置。
• 生产环境需注意代码压缩、缓存策略和 Tree Shaking 优化。