webpack知识点和面试题

什么是webpack

webpack是一个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。
参考资料：https://blog.csdn.net/weixin_43452154/article/details/129066202

为什么用webpack

如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less, sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。

webpack的好处

• 减少请求，来达到减少性能消耗，提升用户体验。
• 将es6语法转换成es5语法，兼容老浏览器。
• 增强项目生命力，怎强代码隐蔽性。

webpack的作用（基本功能）

• 代码转换：将Typescript编译成JavaScript，将SCSS变异成css等。
• 文件优化：压缩JavaScript、css、HTML代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
• 自动刷新：在监听本地源代码的变化，自动重新构建、刷新浏览器。
• 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
• 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

webpack核心概念

• Entry: 入口，webpack执行构建的第一步将从Entry开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
• output： 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist
• Module： 模块，在webpack里一切皆模块，一个模块对应一个文件。webpack会从配置的Entry开始递归找出所有的依赖模块。
• Chunk： 代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
• Loader： 模块转换器，用于模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在webpack构建流程中的特定时机会广播出对应的时间，插件可以监听这些时间的发生，在特定时机做对应的事情。

webpack原理

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

webpack打包流程（处理步骤）

• 初始化流程：
  • 合并参数。从配置文件和shell语句中读取与合并参数，得出最终的参数。配置文件默认是’webpack.config.js’，也可以通过命令的形式指定配置文件。
  • 初始化所有需要的参数。
  • 创建compiler对象，初始化编译环境。包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等。
• 构建流程：
  • 执行compiler对象的run方法，创建compilation对象，。
  • 确认编译入口.读取配置的Entries，递归遍历所有的入口文件，调用Compilation.addEntry，将入口文件转换为Dependency对象。
  • 编译模块（make），从entry文件开始，调用loader对模块进行转译处理，然后调用js解释器将内容转化为AST对象，然后递归分析依赖，依次处理全部文件。
  • 完成模块编译，处理好所有的模块后，得到模块编译产物和依赖关系图。
• 输出流程：
  • 根据入口和模块之间的依赖关系，组成多个包含多个模块的chunk，再把每个chunk转换成asset加入到输出列表，这是可以修改输出的最后机会。
  • 确定好输出内容后，根据配置的output将内容写入文件系统。

可简要概括为：初始化参数、开始编译、确定入口、编译模块、完成编译、输出资源、输出完成。