【面试题】 webpack面试篇

1、与webpack类似的工具还有哪些？谈谈你为什么选择webpack？

1. grunt

• 优点：出现的比较早，第一代打包工具
• 缺点：配置项太多，只有一个配置文件，而且不同的插件可能有自己的配置字段，学习成本较高

1. gulp 基于nodejs的steam流打包工具

• 优点：流式写法，简单直观，api少，代码量少，适合多页面应用开发
• 缺点：异常处理麻烦，都是异步操作，很难精细的控制执行顺序

1. webpack：webpack是模块化管理和打包工具。通过loader的转换，任何形式的资源都可以视作模块，它可以将很多松散的模块，按照依赖和规则打包成符合生产环境部署的前端资源，它的定位是模块打包器，而grunt和gulp是构建工具

• 优点：可以模块化打包任何资源，适合SPA单页面应用开发，还可以按需加载模块进行代码分割
• 缺点：学习成本高，通过babel编译后js代码打包后体积过大

1. rollup 下一代ES6模块化工具，最大的亮点是利用ES6模块化设计，利用tree-shaking生成更简洁、更简单的代码，一般而言，对于应用使用webpack，对于类库使用Rollup。

• 优点：用标准化的es6来写代码，通过tree-shaking来减少体积
• 缺点：对代码拆分、静态资源、CommonJS模块支持不太友好

1. parcel 是一个快速，零配置web应用程序打包工具，目前只能用来构建用于运行在浏览器中的网页，这也是他的出发点和专注点。

• 优点：内置了常见场景的构建方案及其依赖，无需再安装各种依赖。能以html为入口，自动检测和打包依赖资源。默认支持模块热替换，真正的开箱即用
• 缺点：不支持SourceMap，不支持剔除无效代码（treeShaking），配置不灵活

2、Loader和Plugin的区别？

Loader（加载器）：Webpack将一切文件视为模块，单Webpack的原生是只能解析js文件，如果想把其它文件打包的话，就会用到Loader，所以Loader的作用是让Webpack拥有了加载和解析非js文件的能力。

Plugin（插件）：Plugin可以扩展Webpack的功能，让Webpack具有更多的灵活性，在Webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在何时的时机通过Webpack提供的API改变输出结果。

3、webpack的构建流程

• 初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数。
• 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置插件，执行对象的run方法开始执行编译。确定入口，根据配置文件中的entry找出所有的入口文件。
• 编译模块：从入口文件出发，调用所有配置的loader对模块进行编译，再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件都经过了本步骤的处理。
• 完成编译模块：在经过使用Loader翻译完所有的模块后，得到了每个模块被翻译后的最终内容以及他们之间的依赖关系。输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack在会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。

4、Webpack有哪些常见的Loader和Plugin？他们是解决什么问题的？

Loader：

1. babel-loader：把ES6或者React转换成ES5
2. css-loader：加载CSS，支持模块化、压缩、文件导入等特性
3. eslint-loader：代码检查
4. file-loader：输出文件
5. url-loader：和fileload类似，但是小文件可以以base64的形式输出
6. sass-loader：把sass编译成CSS
7. postcss-loader：使用postcss来处理CSS
8. css-loader：主要来处理background还有@import这些语法，让webpack能够正确对其路径进行处理
9. style-loader：把CSS代码注入到JS中，通过DOM操作来加载CSS

Plugin：

1. DefinePlugin：创建一个编译时可配置的全局常量
2. HotMoDuleReplacementPlugin：启动模块热替换
3. html-webpack-plugin：自动生成带有入口文件引用的index.html
4. optimize-css-assets-webpack-plugin：用于优化或者压缩css资源
5. ModuleNotFoundPlugin：找不到模块的时候提供一下更详细的上下文信息
6. webpack-manifest-plugin：生产资产的显示清单文件
7. ModuleScopePlugin：引用了src目录外的文件报警插件

5、source map是什么？上下文环境怎么用？

• source map是为了解决开发代码与实际运行代码不一致是帮助我们debug到原始开发代码的技术
• webpack通过配置可以自动生成source map文件，map文件是一种对应编译文件和源文件的方法

source map的类型：

• source-map：原始代码，最好的source map有完整的结果，但是会很慢
• eval-source-map：原始代码，同样道理，但是最高的质量和最低的性能
• cheap-module-eval-source-map：原始代码（只有行内），但是最高的质量和最低的性能
• cheap-eval-source-map：转换代码（行内），每个模块被eval执行，并且sourcemap作为eval的一个dataurl
• eval：生成代码，每个模块都被eval执行，并且存在@sourceURL，带eval的构建模式能cache SourceMap
• cheap-source-map：转换代码（行内），生成sourcemap没有映射，从loaders生成sourcemap没有被使用
• cheap-module-source-map：原始代码（只有行内）与上面的一样除了每行特点的loader中进行映射

看似配置很多，其实只有五个关键自：eval、source-map、cheap、module和inline的任意组合

关键字及其含义：

• eval：使用eval包裹模块代码
• source-map：生成.map文件
• cheap：不包含列信息和loader的sourcemap
• module：包含loader的sourcemap（比如 jsx to js，babel的sourcemap），否则无法定义源文件
• inline：将.map作为DataURL嵌入，不单独生成.map文件

如何选择source map的类型

首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系，因此，不管是开发还是生产环境都可以选择不包含列信息。

开发环境建议使用：cheap-module-eval-source-map

生成环境使用：cheap-module-source-map

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

1. 压缩js  TerserPlugin({})
2. 压缩css OptimizeCSSAssetsPlugin({})
3. 压缩图片 image-webpack-loader
4. 清除无用的css（定义并未使用）：PurgecssPlugin
5. Tree Shaking:

• 一个模块有多个方法，只要其中某个方法用到了，则整个文件都会打到bundle里面去，tree shaking就是只把用到的方法打包，没用到的方法会在ugligy阶段去掉。
• 原理是利用ES6模块的特点，只能作为模块顶层语句出现，import的模块名只能是字符串常量。
• webpack默认支持，在.babelrc里设置module:false即可在production mode下默认开启

1. Scope Hoisting：

• 可以让webpack打包出来的文件体积更小，运行的更快，它又译为作用域提升，是在webpack3中推出的功能。
• 原理是将所有的模块按照引用顺序放在一个函数作用域里，然后适当地重命名一些变量防止命名冲突，
• 这个功能在node为production下默认开启，开发环境要用webpack.optimize.ModuleConcatenationPlugin

1. 代码分割：

• 对于大的web应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被用到。
• webpack有一个功能就是将你的代码库分割成chunks语块，当代码运行到需要他们的时候再进行加载

1. 入口点分割：

2. Entry Poins：入口文件设置的时候可以配置

3. 问题：

• 如果入口chunks之间包含重复的模块（lodash），那些重复的模块都会被引入各自的bundle中。
• 不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码

1. 动态倒入和懒加载

2. 用户当前需要什么功能就只加载这个功能对应的代码，也就是所谓的按需加载

3. 在给单页应用做按需加载优化时，一般采用以下原则

• 对网站功能进行划分，每一个类一个chunk
• 对于首次打开页面需要的功能直接加载，尽快展示给用户，某些依赖大量代码的功能点可以按需加载
• 被分割出去的代码需要一个按需加载的时机

1. preload（预先加载）

2. proload通常用于本页面要用到的关键资源，包括js，字体，css文件

3. proload将会把资源的下载顺序权重提高，把关键数据提前下载好，优化页面打开速度

4. 在资源上添加预先加载的注释，你指明该模块需要立即被使用

5. 一个资源的加载优先级分为5个级别

• Highest 最高
• High 高
• Medium 中等
• Low 低
• Lowest 最低

1. 异步、延迟、插入的脚本（无论在什么位子），在网络优先级中是Low

2. prefetch（预先拉取）

3. prefetch和preload不同，它的作用是告诉浏览器未来可能会使用到某个资源，浏览器就会在闲时去加载对应的资源，若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要的资源

4. 提取公共代码：

5. 为什么提取公共代码

• 大网站有多个页面，每个页面由于采用相同技术栈和样式代码，会包含很多公共代码
• 相同的资源被重复加载，浪费用户的流量和服务器成本
• 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验
• 如果能把公共代码抽离成单独文件进行加载能进行优化，可以减少网络传输流量

1. splitChunks.  自动分割第三方模块和公共模块

2. CDN

3. 最影响用户体验的是网页首次打开时的加载等待，导致这个问题的根本是网络传输过程耗时大，CDN的作用就是加速网络传输

4. CDN又叫内容分发网络，通过把资源部署到世界各地，用户在访问时按照就近原则从离用户最近的服务器获取资源，从而加速资源的获取速度

5. 用户使用浏览器第一次访问我们的站点时，该页面引入各种静态资源，如果我们能做到持久化缓存的话，可以在http相应头上加Cache-control或Expires字断来设置缓存，浏览器可以将这些资源缓存到本地。

6. 用户在后续访问的时候，如果需要再次请求同样的静态资源，且静态资源没有过期，那么浏览器可以直接走本地缓存不用通过网络请求资源

总结给大家推荐一个实用面试题库

 1、前端后端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

2、前端技术导航大全      推荐：★★★★★

地址：前端技术导航大全

3、开发者颜色值转换工具   推荐：★★★★★

地址 ：开发者颜色值转换工具