声明：文档由AI生成，仅作参考，最终功能和计费标准以官方为准。
一、产品概述
webpack是由德国自由软件开发者Tobias Koppers于2012年研发的开源前端构建工具，核心为现代JavaScript应用程序的静态模块打包器，可将项目中的各类静态资源进行模块化处理、依赖分析、打包转换与优化，同时支持开发环境搭建、生产环境构建等全流程前端工程化能力。
二、产品特色
- 全类型资源模块化处理，支持将JavaScript、CSS、图片、字体等各类静态资源均作为模块管理，依托依赖图分析模块间的依赖关系并完成打包。
- 灵活的模块转换能力，通过各类loader实现非JavaScript文件的解析与转换，如babel-loader转译ES6+语法、css-loader解析CSS文件、sass-loader编译Sass语法等，适配多种开发语法与文件类型。
- 强大的功能扩展体系，基于Plugin API开发的各类插件可实现打包优化、资源注入、自动化构建等复杂需求，官方及社区提供丰富的插件生态如HtmlWebpackPlugin、CleanWebpackPlugin等。
- 高效的开发调试能力，内置webpack-dev-server开发服务器，支持热模块替换（HMR）、实时重载，搭配Devtool配置可生成不同类型的Source Map，便于开发阶段的代码调试。
- 多环境构建适配，通过模式（Mode）配置可快速切换开发（development）与生产（production）环境，生产环境自动开启代码压缩、Tree Shaking等优化，开发环境保留调试能力并提升构建速度。
- 高性能的代码优化能力，支持代码分割、懒加载、缓存控制、公共代码提取等优化手段，可有效减小打包体积、提升应用加载与运行性能。
- 丰富的API与定制化能力，提供命令行接口（CLI）、Node接口、各类钩子（compiler、compilation等），支持自定义loader、插件，满足个性化的构建流程定制需求。
- 跨版本兼容与迁移支持，提供从v1到v5的多版本迁移指南，保障现有项目在版本升级过程中的兼容性，同时持续迭代更新如Module Federation等新特性。
- 完善的工程化集成能力，支持TypeScript、Web Workers、渐进式网络应用程序（PWA）等前沿技术与开发模式，适配现代前端工程化开发需求。
三、收费标准
webpack为开源软件，遵循MIT开源协议，所有核心功能及官方提供的loader、插件均免费使用，无任何付费模块或会员制收费项。
四、常见问题
Q：webpack的核心概念有哪些？
A：webpack的核心概念包含入口起点（entry points）、输出（output）、加载器（loader）、插件（plugin）、模式（Mode），其中入口指定构建起点，输出定义打包文件的输出规则，loader处理非JS文件的转换，插件实现功能扩展，模式区分开发与生产环境。
Q：loader和plugin的区别是什么？
A：loader是文件转换器，主要作用是将非JavaScript类型的文件解析、转换为webpack可处理的模块，执行顺序为从右到左、从下到上；plugin是基于webpack生命周期钩子的功能扩展器，可在打包的各个阶段执行任务，实现打包优化、资源注入、流程控制等复杂需求。
Q：如何实现webpack的代码分割？
A：webpack实现代码分割主要有三种方式，一是通过多入口（entry）配置实现入口分割；二是通过ES6的动态导入语法import('./module')实现懒加载式的代码分割；三是通过配置optimization.splitChunks实现公共代码与第三方库的自动分割。
Q：Tree Shaking功能生效的条件是什么？
A：Tree Shaking需满足三个条件，一是项目中使用ES6模块语法（import/export）；二是webpack配置为生产模式（mode: 'production'）；三是在package.json中设置"sideEffects": false声明代码无副作用，或指定具体的无副作用文件。
Q：webpack开发环境与生产环境的配置主要差异是什么？
A：开发环境侧重调试与构建速度，通常配置devtool: 'eval-source-map'生成Source Map、开启热模块替换（HMR）、不进行代码压缩；生产环境侧重性能与打包体积，开启代码压缩（JS使用TerserWebpackPlugin、CSS使用CssMinimizerWebpackPlugin）、Tree Shaking、缓存控制、公共代码提取等优化，关闭调试相关配置。
Q：如何提升webpack的构建速度？
A：可通过多种方式提升构建速度，包括开启文件系统缓存（cache: { type: 'filesystem' }）、使用thread-loader实现多线程构建、通过exclude排除node_modules等无需处理的目录、减少loader的处理范围、使用DllPlugin预编译第三方库等。
Q：webpack如何处理图片等静态资源？
A：webpack 5中内置了asset模块类型，可直接处理图片、字体等资源，其中asset/resource将资源输出为单独文件并返回路径，asset/inline将小体积资源转换为Base64编码嵌入代码；也可使用url-loader、file-loader等传统loader，通过配置limit参数设置Base64转换的阈值。
Q：什么是热模块替换（HMR），其作用是什么？
A：热模块替换（Hot Module Replacement）是webpack的核心特性之一，指在开发过程中修改代码后，无需刷新整个浏览器页面，仅替换更新的模块，保留应用当前的运行状态，大幅提升前端开发的调试效率。