阅读 1891

15分钟搞定webpack构建流程

花了三天的时间重新研究了一下webpack,不禁感叹webpack的配置真的是麻烦得要死,不过没办法还是得硬着头皮去一行一行代码研究。

webpack的核心概念

  • Entry: 入口,webpack执行构建的第一入口,可以抽象理解为input
  • Module: 模块, 在webpack里面一切皆是模块,一个模块对应一个文件,webpack会从配置的Entry开始,递归找到所有依赖的模块。
  • Chunk:代码块, 一个chunk是由多个模块组合而成,用于代码合并与分割。
  • Loader: 模块转换器,用于将模块的元内容按照需求转换成新内容。
  • Plugin: 扩展插件,在webpack构建流程中的特定时机会广播对应的事件,插件可以监听这些事件,在特定的时机做对应的事情。

webpack的流程

webpack是一个串行的过程,从启动到结束会依次执行以下流程

  • 初始化参数: 从shell参数和配置文件合并参数,得出最终的参数
  • 开始编译:从上一步获得的参数初始化compiler对象,加载所有的插件,通过run方法执行编译。
  • 确定入口:根据配置文件的entry找出所有入口文件。
  • 编译模块:从入口文件开始,调用所有配置的loader对模块进行翻译成compliation,然后递归所有依赖的模块,然后重复编译。得到每个模块翻译后的最终内容以及它们之间的依赖关系。
  • 输出资源:根据入口和模块的依赖关系,组装成一个个包含多个模块的chunk,然后将chunk转换成一个单独的文件加入输出列表,这是可以修改输出内容的最后机会
  • 输出完成: 在确定好输出内容后,根据配置确定输出的路径和文件名,将文件的内容写入文件系统上。

在以上过程中,webpack会在特定的时间点广播特定的事件,插件通过监听到感兴趣的事件后执行特定的逻辑,并且改变webpack的运行结果。

一般我们在webpack的配置文件会分为多份。

  • dev 开发版本的配置主要侧重在hot-reload上面,提升开发效率。
  • production 线上版本,主要侧重在 js, css 压缩
  • test 目前没有配置 但是主要是单元测试和集成测试。

webpack配置难在哪?

这几天webpack配置学习下来,最大的感受就是繁琐,之前社区也有讨论过webpack的配置之繁琐简直令人发指,缺乏一定的默认选项,庞杂的社区插件,不同的插件版本的兼容问题都是让人无比头疼的问题。索性webpack4.0也有所改进,新增的不少默认选项,但是问题来了目前项目使用的是webpack3.12.0,急需一个webpack配置师帮我们升级到 v4.0版本