WebPack面试题总结

一、常见的问题

1、Loader和Plugin的区别?

• Loader直译为"加载器"。Webpack将⼀切⽂件视为模块，但是Webpack原⽣是只能解析JavaScript⽂件，如果想将其他⽂件也打包的话，就会⽤到Loader。所以Loader的作⽤是让Webpack拥有了加载和解析非JavaScript文件的能力;
• Plugin直译为"插件"。Plugin可以扩展Webpack的功能,让Webpack具有灵活性。在Webpack运⾏的⽣命周期中会⼴播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。

2、WebPack中bundle,chunk,module的作用是什么?

• bundle 是由Webpack打包出来的文件;
• chunk 代码块,一个chunk由多个模块组合⽽成，⽤于代码的合并和分割;
• module 是开发中的单个模块，在Webpack中⼀个模块对应⼀个⽂件，Webpack会从配置的entry中递归开始找出所有依赖的模块。

3、打包过程

webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来。

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

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑。

4、打包原理

解析各个模块的依赖关系 使用loader转换文件，使用plugin注入钩子，打包合并模块，最终生成bundle文件，使用express开启本地服务器， 浏览器请求的是bundle文件，也就是打包过后的文件。

5、支持功能

同时支持热更新，支持tree shaking 、Scope Hoisting、动态加载、代码拆分、文件指纹、代码压缩、静态资源处理等；

6、如何利用webpack来优化前端性能？

按需加载

代码分割 splitChunks - 在optimization配置项中配置

1.可以将node__mudules中代码单独打包成一个chunk输出（比如使用了jqury？）
2.会自动分析多入口chunk中，有没有公共的文件，如果有会打包成单独的一个chunk不会重复打包

js压缩:利用terser-webpack-plugin
css压缩:利用了optimize-css-assets-webpack-plugin 插件

删除了console、注释、空格、换行、没有使用的css代码等

7、如何提高webpack的构建速度？

减少需要构建的文件或代码

HMR(Hot Module Replacement) 模块热替换只重新构建发生变化的模块 – 开发环境中
缩小处理范围:合理利用这两个属性exclude：不需要处理的文件 和 include：需要处理的文件
babel缓存 第二次构建时，会读取之前的缓存，只重新构建变化的文件
使用Dll进行分包 --> 分包方便按需加载

多线程进行构建

多进程打包 thread-loader,将其放在费时的loader之前