什么是Webpack?

Webpack是现代JavaScript应用的静态模块打包器。

基本概念:

  • 将项目中的各种资源(JS、CSS、图片等)视为模块

  • 通过依赖关系图进行打包,生成优化后的静态资源

  • 支持多种模块化规范(CommonJS、ES6模块等)

核心功能:

  • 模块打包:将多个文件打包成少数几个文件

  • 代码转换:通过loader转换各种文件类型

  • 代码优化:压缩、混淆、Tree Shaking等

  • 开发服务器:提供热更新功能

主要概念:

  • Entry:入口文件,webpack开始打包的起点

  • Output:输出配置,指定打包后的文件位置

  • Loader:文件转换器,处理非JS文件

  • Plugin:插件,扩展webpack功能

优势:

  • 功能强大,生态丰富

  • 支持代码分割和懒加载

  • 提供完整的开发工具链

  • 社区活跃,插件众多

使用场景:

  • 大型单页应用开发

  • 需要复杂构建流程的项目

  • 多页面应用打包

Webpack是目前最主流的模块打包工具,是前端工程化的重要工具。