Webpack 相关用法与总结

1. Webpack 的核心概念与作用

• 作用：Webpack 是一个静态模块打包工具，通过构建依赖关系图（Dependency Graph），将项目中的模块（JS、CSS、图片等）打包成一个或多个优化后的文件（Bundle），支持代码分割、按需加载、资源优化等功能。
• 核心概念：
  • Entry：入口文件，Webpack 构建的起点（如 ./src/index.js）。
  • Output：输出配置，定义打包文件的路径和名称（如 ./dist/main.js）。
  • Loader：处理非 JS/JSON 文件（如 CSS、Less、图片），将其转换为模块（例如 babel-loader 转换 ES6 语法）。
  • Plugin：扩展 Webpack 功能，如代码压缩、生成 HTML 模板（如 HtmlWebpackPlugin）。
  • Chunk：代码块，由多个模块组成，用于代码分割和按需加载。

---

2. Webpack 的构建流程

1. 初始化参数：合并配置文件和命令行参数。
2. 开始编译：创建 Compiler 对象，加载插件，执行 run 方法启动编译。
3. 确定入口：根据 entry 配置找到所有