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版本

转载于:https://juejin.im/post/5b0e92caf265da08fa734201