Webpack 是现代 JavaScript 项目中不可或缺的构建工具，能够自动化处理模块化开发中的资源打包、代码分割、热更新等功能。以下是核心知识点梳理：

📚 基本概念

  • 模块打包：将项目中所有模块（如 JS、CSS、图片）打包成一个或多个文件
  • 代码分割：通过 splitChunks 实现按需加载，提升首屏性能
  • 热更新：使用 hotModuleReplacement 实时更新代码无需刷新页面
  • Loader 处理：通过 babel-loader 等转换代码格式（如 TypeScript/ES6）

🛠 安装与配置

npm install --save-dev webpack webpack-cli
  1. 创建 webpack.config.js 文件
  2. 配置入口出口：entry: './src/index.js', output: { filename: 'bundle.js' }
  3. 添加 loader 规则：module: { rules: [ { test: /\.js$/, use: 'babel-loader' } ] }

🚀 常用功能示例

  • 开发服务器：npx webpack serve 启动实时热更新服务
  • 生产构建：npx webpack --mode production 优化输出文件
  • 插件系统：集成 html-webpack-plugin 生成 HTML 文件

✅ 最佳实践

  • 使用 splitChunks 分割第三方库
  • 启用 optimization.splitChunks 实现懒加载
  • 配置 devServer.hot 开启 HMR 功能
  • 通过 stats 参数控制构建信息输出

📚 扩展阅读

Webpack 基础用法教程
Webpack 高级配置技巧

Webpack 模块打包
代码分割