【前端面试题-01】简单说一下webpack构建流程

Webpack 构建流程大致可以概括为以下步骤：

1. 初始化参数：

   • 从配置文件（如webpack.config.js）和命令行参数中读取并合并参数，形成最终的构建配置。

2. 启动编译：

   • 创建 Compiler 对象，该对象是构建过程的核心控制器。
   • 加载配置中的所有插件，并在编译生命周期的不同阶段调用相应的插件实例方法。

3. 读取入口文件：

   • 根据配置文件中指定的 entry 入口点，找到项目的起点。

4. 模块解析与依赖收集：

   • 从入口文件出发，Webpack 使用其内部的模块解析机制逐层递归地查找并解析所有导入的模块依赖。
   • 支持多种模块规范，如 CommonJS、AMD、ES6 模块等。

5. 编译模块：

   • 对每个模块应用 loader 进行预处理，如将 TypeScript 转换成 JavaScript，SASS 转换成 CSS 等。
   • Loader 会按照配置顺序依次执行，转换模块的内容。

6. 生成依赖图谱：

   • 在解析和编译的过程中，Webpack 会构建出一个完整的模块依赖树（或称为依赖图谱）。

7. ** chunk 分割与优化**：

   • 根据 entry 和 optimization 配置，Webpack 将模块组合成 chunks（通常是按需加载的代码块），这可能涉及到代码分割、公共代码提取等优化策略。

8. 输出资源：

   • 根据依赖关系和 output 配置，Webpack 将各个 chunk 写入到 bundle 中。
   • 同时也会处理其它非 JS 资源，如图片、CSS 文件等，并对其进行适当的转化和打包。

9. 资源写入文件系统：

   • 最终，Webpack 将生成的 bundles 以及其他输出资源写入到指定的目录中。

在上述整个流程中，Webpack 通过广播一系列的编译事件，允许插件在特定时刻介入并修改编译结果，以实现各种定制化的构建功能。例如，插件可以在资源打包前压缩代码、生成 source map，或者在构建结束后自动刷新浏览器等。