【前端面试】webpack面试整理

webpack的理解

依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、避免重复加载或者加载不必要的模块
合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，配合uglify.js可以减少、优化代码的体积
各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误

运行流程

命令行执行npx webpack打包命令开始
初始化编译参数:从配置文件和shell命令中读取与合并参数
开始编译:根据上一步得到的参数初始Compiler对象，加载所有配置的Plugin，执行对象的 run 方法开始执行编译。
确定入口:根据配置webpack.config.js中的 entry 找出所有的入口文件;(不同的entry生成不同的chunk，动态导入也会生成自己的chunk）
编译模块:从入口文件触发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，然后递归本步骤直到所有入口依赖的文件都进行翻译。
完成模块编译:在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图。
输出资源：根据依赖关系图，组装成一个个包含多个模块的Chunk，再把每个Chunk转化成一个单独的文件加入到输出列表，根据配置确定输出的路径和文件名，输出。

loader

Loader 是webpack中提供了一种处理多种文件格式的机制，因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理
常见的loader：
	less-loader:将less文件编译成css文件；（开发中，我们常常会使用less预处理器编写css样式，使开发效率提高）
	css-loader:将css文件变成commonjs模块加载到js中，模块内容是样式字符串
	style-loader: 创建style标签，将js中的样式资源插入标签内，并将标签添加到head中生效

Plugin

主要目的：解决loader 无法实现的事情，比如打包优化和代码压缩等
Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。

Loader和Plugin的区别

webpack 就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。
插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。
loader运行在编译阶段；plugins在整个周期都起作用

优化手段

利用webpack优化前端性能（问的是生产环境的优化）
提高webpack的构建速度（构建速度的优化）
	减少需要构建的文件或代码
		HMR(Hot Module Replacement) 模块热替换只重新构建发生变化的模块 – 开发环境中
		使用Dll进行分包 --> 分包方便按需加载
	多进行进行构建
		多进程打包 thread-loader,将其放在费时的loader之前
上述两者的优化处理
	tree-shaking：在打包过程中标记没有引用过的模块，删除没有引用过的模块，达到优化效果
		注意
			默认mode = production ，生产环境默认开启tree-shaking功能。
			需要是使用 ES6 规范编写模块代码,ES6的模块依赖关系是确定的，和运行时状态无关
			尽量不写带有副作用的代码。如编写了立即执行函数，在函数里使用了外部变量等。
	代码压缩
		按需加载
			代码分割 splitChunks - 在optimization配置项中配置
				1.可以将node__mudules中代码单独打包成一个chunk输出（比如使用了jqury）
2.会自动分析多入口chunk中，有没有公共的文件，如果有会打包成单独的一个chunk不会重复打包
			使用Dll进行分包
				正常情况下node_module会被打包成一个文件
使用dll技术，可以将那些不常更新的框架和库进行单独打包，生成一个chunk
			使用路由懒加载
				在代码中所有被 import()函数引用的模块，都将打成一个单独的包，放在 chunk 存储的目录下。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步加载。
		如何配置
			在optimization配置项中来配置该插件作为压缩器进行压缩。
			在plugins里使用该插件进行压缩
				js压缩（terser-webpack-plugin）
				css压缩:利用了optimize-css-assets-webpack-plugin 插件
				删除了console、注释、空格、换行、没有使用的css代码等