[webpack] 第2030天 在webpack中，如何确定依赖引用顺序

[haizhilin2013]

第2030天 在webpack中，如何确定依赖引用顺序

3+1官网

我也要出题

[Elylicery]

1. 依赖图构建 Webpack 构建过程始于配置文件中定义的一个或多个入口点。entry字段指定了应用的入口文件，Webpack从入口文件开始递归解析所有依赖的模块。入口文件中的模块会优先被加载。然后通过解析模块中的import或require语句构建依赖关系图。

2. 依赖排序 一旦整个依赖图被完全构建出来后，下一步就是按照正确的顺序排列这些模块，一个模块会在它所依赖的模块之后被加载。以便于执行时不会出现“未定义”的错误。这里使用的是图论中的拓扑排序算法，确保如果 A 模块依赖 B 模块，则 B 必须先于 A 被加载

3. 优化与分块 在Webpack 4及以上版本中，可以使用optimization配置来影响模块的打包和加载顺序。例如，通过optimization.splitChunks配置公共模块。使用动态import()语法可以实现代码分割。Webpack会为每个分割的代码块（chunk）生成独立的文件，并在需要时按需加载。

4. 插件系统 某些Webpack插件可能会影响模块的加载顺序。例如，HtmlWebpackPlugin会自动将打包生成的资源插入HTML中，并可以配置资源的引入顺序。