Webpack 的运⾏流程是⼀个串⾏的过程，从启动到结束会依次执⾏以下流程：

1.初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果。 2.开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。 3.确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去。 4.编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。 5.完成模块编译：在经过第4步使⽤ Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系； 6.输出资源：根据⼊⼝和模块之间的依赖关系，组装成⼀个个包含多个模块的 Chunk，再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表，这步是可以修改输出内容的最后机会； 7.输出完成：在确定好输出内容后，根据配置确定输出的路径和⽂件名，把⽂件内容写⼊到⽂件系统。

其它类似工具： 同样是基于入口的打包工具还有以下几个：webpack，rollup，parcel，vite，snowpack 从应用场景上来看：

webpack：适合大型复杂的前端站点构建，尤其是模块化的，单页应用。 rollup：专门针对类库进行打包，它的优点是小巧而专注。因此现在很多我们熟知的库都都使用它进行打包，比如：Vue、React和three.js等。 parcel：零配置，傻瓜式。适用于简单的实验室项目，打包出错很难调试。不支持Tree Shaking。更多优点：传送门。 vite：灵活、复杂度适中，未来趋势。开发期间无需打包，越大型体验感越好。 snowpack与vite类似。

rollup、vite、snowpack，都是基于ESM，开发期间无需构建，浏览器直用。

参考文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：