关于webpack面试题

1.webpack是什么

webpack是一个静态资源打包器，当webpack处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。他会以一个或多个文件作为打包入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，可在浏览器运行。
有五大核心概念：entry/output/loader/plugins/mode
1.entry(入口)：指示webpack从哪个文件开始打包
2.output(出口)：指示webpack打包完的文件输出到哪里，如何命名
3.loader(加载器)：它本身只能处理js/json等资源，其他资源(css/less/sass/style等)就需要借助loader,webpack才能解析
4.plugin(插件)：扩展webpack功能
5.mode(模式)：生产模式还是开发模式

2.执行过程

webpack默认执行webpack.config.js文件，读取入口文件开始解析各种资源。

3.列举几个常用的loader

sass-loader：解析sass文件，转成css
file-loader：处理字体，图片
css-loader：解析css文件，处理css代码
style-loader:将css代码插入到页面当中
img-loader：专门处理图片
babel-loader：解析es6转成es5

5.loader执行顺序

从右向左自下而上

6.plugins有哪些

html-webpack-plugins解析html

7.loader和插件plugins的区别

正常情况下，先用loader将资源都处理完成之后再执行插件
loader是专门用于处理资源的，运行在编译过程。而plungins是对webpack没有的功能的补充，在整个周期都起作用
使用方式上：loader是先下载然后使用；plugins是先下载再引用最后使用

8.怎么处理图片资源，关于图片大小的优化

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理。现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。

parser: {
         dataUrlCondition: {
         //少于10kb会转，优点减少请求数量，缺点变大
         maxSize: 10 * 1024 // 10kb
         }
},
1
2
3
4
5
6

9.怎么自动将上次打的包都清除掉

1.在ouput中添加:clean:true
2.通过插件：clean-webpack-plugin 每次打包时候，CleanWebpackPlugin 插件就会自动把上一次打的包删除

10.如何提高webpack的构建速度

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

• HMR模块热替换只重新构建发生变化的模块（开发环境中）
• 缩小处理范围：合理利用这两个属性exclude（不需要处理的文件）、include（需要处理的文件）
• babel缓存。第二次构建时，会读取之前的缓存，只重新构建发生变化的文件
• 使用DII进行分包—>分包方便按需加载（正常情况下，node_module会被打包成一个文件，使用DII技术，对可以讲不常更新的框架和库单独单独进行打包，生成一个chunk）

2.多进程进行构建
多进程打包thread-loader，将其放在费时间的loader之前。进程启动和进程通信都有开销，工作时间比较长，才需要进行多进程打包