注册

关于webpack面试题总结

最近在读《webpack深入浅出》,总结一下webpack关于面试常见的问题,分享出来,希望可以帮助更多小伙伴在找到心爱的工作和期待的薪水。

一.常见的构建工具有哪些?他们各自优缺点?为什么选择了webpack?

Grunt、Gulp、Fis3、Rollup、Npm Script、webpack

<1>Grunt的优点是:

• 灵活,它只负责执行我们定义的任务;

• 大量的可复用插件封装好了常见的构建任务。

Grunt的缺点是:

集成度不高,要写很多配置后才可以用,无法做到开箱即用。Grunt相当于进化版的NpmScript,它的诞生其实是为了弥补NpmScript的不足。

<2>Gulp的优点是: 好用又不失灵活,既可以单独完成构建,也可以和其他工具搭配使用。

其缺点: 和Grunt类似,集成度不高,要写很多配置后才可以用,无法做到开箱即用。

<3> Fis3的优点是:集成了各种Web开发所需的构建功能,配置简单、开箱即用。

其缺点是 目前官方己经不再更新和维护,不支持最新版本的T、fode

<4>Webpack的优点是:• 专注于处理模块化的项目,能做到开箱即用、一步到位:

• 可通过Plugin扩展,完整好用又不失灵活;

• 使用场景不局限于Web开发

• 社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展:

• 良好的开发体验。

Webpack的缺点是:只能用于采用模块化开发的项目。

<5> Rollup是在Webpack流行后出现的替代品,讲述差别::
• Rollup生态链还不完善,体验不如Webpack;

• Rollup的功能不如Webpack完善,但其配置和使用更简单:

• Rollup不支持CodeSpliting,但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。

Roll up在用于打包JavaScript库时比Webpack更有优势,因为其打包出来的代码更小、

深入浅出Webpack更快。

缺点:但它的功能不够完善,在很多场景下都找不到现成的解决方案

<6>Npm Script的优点 是内置,无须安装其他依赖。
其缺点 是功能太简单,虽然提供了pre和post两个钩子,但不能方便地管理多个任务之间的依赖

为啥选择webpack?
大多数团队在开发新项目时会采用紧跟时代的技术,这些技术几乎都会采用“模块化+新语言+新框架”,Webpack可以为这些新项目提供一站式的解决方案:
• Webpack有良好的生态链和维护团队,能提供良好的开发体验并保证质量:

• Webpack被全世界大量的Web开发者使用和验证,能找到各个层面所需的教程和经验分享。

二.有哪些常见的Loader?你用过哪些Loader?

1. 加载文件
• raw-loader :将文本文件的内容加载到代码中

• file-loader :将文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件

• url-loader :和 file-loader 类似,但是能在文件很小的情况下以 base64 方式将文件的内容注入代码中

• source-map-loader :加载额外的 SourceMap 文件,以方便断点调试

• svg-inline-loader :将压缩后的SVG 内容注入代码中

• node-loader :加载 Node.js 原生模块的 .node 文件

• image-loader :加载并且压缩图片文件

• json-loader:加载 JSON 文件

• yaml-loader:加载 YAML 文件

2. 编译模版
• pug-loader :将 Pug 模版转换成 JavaScript 函数井返回。

• handlebars-loader:将 Handlebars模版编译成函数并返回

• s-loader :将 EJS 模版编译成函数井返回

• haml-loader:将 HAML 代码转换成 HTML

• markdown-loader 将 Markdown 文件转换成 HTML

3.转换脚本语言
• babel-loader :将 ES6 转换成 ES5

• ts-loader :将 TypeScript 转换成 JavaScript,

• awesome-typescript-loader: Type Script 转换成 JavaScript ,性能要比 ts-loader好

• coffee-loader 将 CoffeeScript换成 JavaScript

4.转换样式文件
• css-loader :加载 css ,支持模块化、压缩、文件导入等特性。

• style-loader :将 css 代码 注入JavaScript 中,通过 DOM 操作去加载 css

• sass-loader :将 SCSS SASS 代码转换成 css

• postcss-loader : 扩展 css 语法,使用css

• less-loader : Less 代码转换成 css代码

• stylus-loader :将 Stylu 代码转换成 css 码。

5. 检查代码
• eslint-loader :通过 ESLint 检查 JavaScript
代码

• tslint-loader :通过 TSLint peScript
代码

• mocha-loader :加载 Mocha 测试
用例的代码

• coverjs-loader : 计算测试的覆盖率。

6.其他 Loader
• vue-loader :加载 Vue. 单文件组件

• i18n-loader:加载多语言版本,支持国际化

• ignore-loader :忽略部分文件

• ui-component-loader:按需加载
UI 组件库,例如在使用 antdUI 组件库时,不会因为只用到了 Button 组件而打包进所有的组件

3.有哪些常见的Plugin?你用过哪些Plugin?

1.用于修改行为
• define-plugin :定义环境变量

• context-replacement-plugin : 修改 require 语句在寻找文件时的默认行为

• ignore-plugin :用 于忽略部分文件

2.用于优化
• commons-chunk-plugin :提取公共代码。

• extract-text-webpack-plugin :提取 JavaScript 中的 css 代码到单独的文件中

• prepack-webpack-plugin :通过Facebook Prepack 优化输出的 JavaScript 代码的性能

• uglifyjs-webpack-plugin :通过 UglifyES 压缩 S6 代码

• webpack-parallel-uglify-plugin :多进程执行 glifyJS 代码压缩,提升构建的速度

• imagemin-webpack-plugin : 压缩图片文件。

• webpack-spritesmith :用插件制作碧图

• ModuleConcatenationPlugin : 开启 WebpackScopeHoisting 功能

• dll-plugin :借鉴 DDL 的思想大幅度提升构建速度

• hot-module-replacem nt-plugin 开启模块热替换功能。

3. 其他 Plugin
• serviceworker-webpack-plugin :为网页应用增加离钱缓存功能

• stylelint-webpack-plugin : stylelint集成到项目中,

• i18n-webpack-plugin : 使网页支持国际化。

• provide-plugin : 从环境中提供的全局变量中加载模块,而不用导入对应的文件。

• web-webpack-plugin : 可方便地为单页应用输出 HTML ,比 html-webpack-plugin 好用

4.那你再说一说Loader和Plugin的区别

Loader :模块转换器,用于将模块的原内容按照需求转换成新内容。
Plugin :扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑,来改变构建结
果或做我们想要的事情。

5.Webpack构建流程简单说一下

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

6.使用webpack开发时,你用过哪些可以提高效率的插件

webpack-dashboard:可以更友好的展示相关打包信息。
webpack-merge:提取公共配置,减少重复配置代码
speed-measure-webpack-plugin:简称 SMP,分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时,有助于找到构建过程中的性能瓶颈。
size-plugin:监控资源体积变化,尽早发现问题
HotModuleReplacementPlugin:模块热替换

7.模块打包原理知道吗?


8.什么 是模块热更新?


devServer.hot 配置是否启用 ,开启模块热替换功能后,将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览


9.如何提高webpack的构建速度?


10.文件监听原理呢?


11.source map是什么?生产环境怎么用?


12.如何对bundle体积进行监控和分析?


13.文件指纹是什么?怎么用?


14.在实际工程中,配置文件上百行乃是常事,如何保证各个loader按照预想方式工作?


15.如何优化 Webpack 的构建速度?


16.你刚才也提到了代码分割,那代码分割的本质是什么?有什么意义呢?


17.是否写过Loader?简单描述一下编写loader的思路?


18.是否写过Plugin?简单描述一下编写Plugin的思路?


19.聊一聊Babel原理吧?


20.什么是Tree-shaking?
Tree Shaking 可以用来剔除 JavaScript 中用 不上的死代码。


21.如何实现 按需加载?


``import(/* webpackChunkName : ” show " */ ’. / show ’>


Webpack 内置了对 import *)语句的支持,当 Wepack 遇到了类似的语句时会这样


处理:
• 以./ show.j 为入口重新生成一个 Chunk;
• 代码执行到 import 所在的语句时才去加载由 Chunk 对应生成的文件:
• import 返回一个 Promise ,当文件加载成功时可以在 Promise then 方法中获取
show.j 导出的内容。``


22.如何配置单页应用?如何配置多页应用?


23.如何利用webpack来优化前端性能?(提高性能和体验)


24.npm打包时需要注意哪些?如何利用webpack来更好的构建


25.什么是模块化,都有哪些?


模块化是指一个复杂的系统分解为多个模块以方便编码。


js模块化:


mommon.js:核型思想,通过require方法来同步加载依赖的其他模块,通过module.exports导出需要暴露的接口。


优点
1.代码可复用于node环境并运行,例如同构应用
2.通过npm发布的很多第三方模块都采用了mommonJS规范


缺点:1.无法直接运行在浏览器环境下,必需通过工具转换成标准的es5


AMD:异步方式去加载依赖的模块,主要用来解决针对浏览器环境的模块化问题,最具代表的实现是require.js


优点
1.可在不转换代码的情况下,直接在浏览器中运行
2.可异步加载依赖
3.可并行加载多个依赖
4.代码可运行在浏览器和node环境下


缺点 :1.js运行环境没有原生支持AMD,需要先导入实现了AMD的库后才能正常使用。


es6模块化:

import { readFile} from 'fs';
import react from 'react';

// 导出
export function hello(){};
export default{...}


链接:https://juejin.cn/post/6855129007856451591

1 个评论

背题背题!!!

要回复文章请先登录注册