Webpack编译JS如何避免模块按名称排序改变原有执行顺序

首先明确核心结论：Webpack 本身没有内置按文件名排序调整同步代码执行顺序的规则，你遇到的顺序错乱、运行报错本质是对 ESM 模块执行逻辑的认知偏差，外加模块依赖声明缺失导致的，不是 Webpack 的排序配置问题。

问题本质说明 #

ESM 标准下的模块执行分为两个独立阶段，Webpack 完全遵循该规范实现：

1. 模块初始化阶段：从入口文件开始深度遍历所有 import 声明，优先执行所有被依赖模块的顶层代码，这个阶段的执行顺序完全由每个模块内部显式声明的依赖关系决定，和入口文件里写的函数调用顺序没有关系。如果多个模块之间没有显式的 import 依赖，Webpack 遍历模块的顺序可能受文件路径排序影响，不存在固定的优先级保证。
2. 入口代码执行阶段：等所有依赖模块初始化完成后，才会从上到下严格执行入口文件里写的同步函数调用，这部分代码的顺序 Webpack 不会做任何调整，和你写的源码顺序完全一致。

你遇到的报错核心原因是：display、events 模块本身依赖 functions 模块的方法，但你没有在这些模块内部显式写 import 声明引入依赖，反而试图靠入口文件里的导入、调用顺序控制执行优先级，这种写法本身不符合 ESM 规范。当模块间没有显式依赖关系时，Webpack 按文件路径排序遍历模块的行为就会导致依赖的模块后执行，最终触发报错。你看到的“方法调用顺序被调整”其实是看产物时的错觉——那些被提前执行的逻辑，本质是模块初始化阶段跑的顶层代码，不是你写在入口里的调用语句。

修复方案 #

• 先补全所有模块的显式依赖声明：哪个模块用到了 functions/events 里的方法，就在对应模块顶部加对应的 import 语句，比如在 display1.js 顶部写 import * as Functions from '../functions/functions.js'。只要依赖关系声明正确，Webpack 会自动保证被依赖的模块优先初始化，不需要任何额外排序配置。
• 排查构建配置影响：如果补全依赖后还是看到顺序异常，先把构建模式切到 development，关闭 optimization.minimize 压缩配置，查看未压缩的产物确认执行顺序。代码压缩工具默认不会调整有明确依赖关系的代码顺序，但如果代码存在隐式依赖（比如靠全局变量传递值、没写import的跨模块调用），压缩阶段的代码重排确实可能触发报错。
• 不要尝试通过自定义配置强行修改无依赖模块的执行顺序，这类方案本质是在掩盖代码依赖关系不清晰的问题，后续升级构建工具、调整配置时很容易再次出现同类问题。

内容的提问来源于stack exchange，提问作者kai kyle