概述

  • 本文次要介绍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'}};
  • 后续更新...