一篇弄清webpack

概述

• 本文主要介绍webpack的诞生的原因，webpack解决了什么问题。
• webpack中的loader、plugin是什么？如何工作的？能否自己构建loader或plugin
• webpack怎么打包文件的？AST抽象语法树是什么？
• 实际开发中我们修改某个文件后页面也随之发生变化，这个热更新过程是如何做到的？
• webpack如何管理打包后模块之间的交互？webpack的runtime和manifest是什么？

webpack诞生的原因

• 早期如何开发复杂功能

  1. 回忆我们最开始学习JS时，浏览器运行JS文件需要通过script标签加载，复杂功能就需要分离到不同的JS文件中，那么就需要加载很多个JS文件，会导致网络瓶颈问题。PS：chrome一个任务周期内最多能并发6个网络请求
  2. 如果将所有功能写在一个JS文件中，那么维护成本和开发成本必然会越来越高

• webpack诞生后，解决了什么？

  1. webpack的诞生是在Node.js发布之后，提出了CommonJS用以解决功能模块化的问题，但浏览器并不直接支持CommonJS语法，因此有了require、Browserify来转译。
  2. webpack会提供node环境，支持CommonJS和ESM规范，并支持任何模块格式。使开发人员只注重业务开发，不关心模块在浏览器的兼容问题。PS：只要提供不同模块对应的loader，webpack就能转换成浏览器能直接运行的JS文件
  3. ESM是JS官方提出了一种解决模块化问题的方案，在今天大部分高版本的浏览器都能支持，Vite构建工具的核心理念也是ESM。其核心主旨是可以不用加载整个项目的JS文件，当页面内容需要哪个模块的JS文件才会发起JS文件加载请求，并且会缓存。这种方式能极大提高项目加载速度。

webpack中的loader、plugin是什么？

• 上面提到webpack能打包不同文件格式的代码，通过webpack处理后能直接在浏览器运行，但不能增强功能，这就是loader的作用，如解析sass文件的sass-loader。
• loader可以理解成学校，不管你哪个地方来的学生，出去后给你发一套相同的校服。这套校服就是浏览器运行的JS。
• plugin就是我们常说的插件，用于增强功能，弥补loader的不足，如axios。好比游戏中的装备，游戏人物配备不同的装备，伤害会不同，技能也更酷炫。

webpack怎么打包文件的？AST抽象语法树是什么？

• 在webpack.config.js这个配置文件中，entry就是webpack打包的入口，但有些脚手架的高版本中会隐藏这个文件，若要配置先创建这个文件。

  module.exports = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
  };

• 后续更新...