webpack - 主要作用、构建流程

webpack主要作用

模块打包

• 可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确、执行有序
• 利用打包我们可以在开发的时候根据我们自己的业务自由划分文件模块，从而保证项目结构的清晰和可读性

编译兼容

• 通过webpack的loader机制，可以帮助我们对代码做polyfill。
  polyfill
  注：polyfill(polyfiller)，指的是一个代码块。这个代码块向开发者提供了一种技术， 这种技术可以让浏览器提供原生支持，抹平不同浏览器对API兼容性的差异
• 可以编译转换诸如.less、.vue、.jsx这类浏览器无法识别的格式文件
• 这使得我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。

能力扩展

• 通过webpack的plugin机制，我们在实现模块化打包、编译兼容的基础上，可以进一步实现诸如按需加载、代码压缩等一系列功能，帮助我们进一步提高自动化程度、工程效率以及打包输出的质量。

webpack构建流程

1. 初始化：启动构建，读取和合并配置参数，加载plugin，实例化compiler

2. 编译：从entry出发，针对每个module串行调用对应的loader去翻译文件的内容，再找到该module依赖的module，递归地进行编译处理。

3. 输出：将编译后的module组合成chunk，将chunk转换成文件，输出到文件系统中。

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