关于前端:一篇弄清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'}
  };

• 后续更新 …