Webpack面试题

简介: 【10月更文挑战第1天】

一、说一下对Webpack的看法

Webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。

它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。

对于不同类型的依赖,Webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。

二、Webpack的基本功能

代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等

代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

三、有哪些常见loader

file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)

url-loader:与 file-loader 类似,区别是用户可以设置一个阈值,大于阈值会交给 file-loader 处理,小于阈值时返回文件 base64 形式编码 (处理图片和字体)

css-loader:加载 CSS,支持模块化、压缩、文件导入等特性

style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS

json-loader: 加载 JSON 文件(默认包含)

ts-loader: babel-loader:把 ES6 转换成 ES5

ts-loader: 将 TypeScript 转换成 JavaScript

less-loader:将less代码转换成CSS

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

vue-loader:加载 Vue单文件组件

四、有哪些常见Plugin

html-webpack-plugin:根据模板页面生成打包的 html 页面

uglifyjs-webpack-plugin:不支持 ES6 压缩 ( Webpack4 以前)

mini-css-extract-plugin: 分离样式文件,CSS 提取为独立文件,支持按需加载

clean-webpack-plugin: 目录清理

copy-webpack-plugin: 拷贝文件

webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)

五、webpack的loader和plugin的区别

loader:加载器,用于单纯的转换文件,作用在一个文件上

plugin:插件,相当于一个扩展器,能够执行更加广泛的任务,丰富了webpack功能,不仅局限于功能的加载

相关文章
|
7月前
|
移动开发 前端开发 JavaScript
WebPack面试题总结(1),2024华为Web前端面试真题
WebPack面试题总结(1),2024华为Web前端面试真题
|
7月前
|
移动开发 前端开发 JavaScript
WebPack面试题总结,2024年最新web前端面试自我介绍
WebPack面试题总结,2024年最新web前端面试自我介绍
|
7月前
|
缓存 JavaScript 前端开发
Webpack面试题,实用面试技巧
Webpack面试题,实用面试技巧
|
缓存 移动开发 JSON
【跳槽必备】2023webpack常问面试知识点总结
【跳槽必备】2023webpack常问面试知识点总结
67 0
|
7月前
|
存储 缓存 前端开发
【面试题】你需要知道的webpack高频面试题
【面试题】你需要知道的webpack高频面试题
178 0
|
7月前
|
缓存 前端开发 JavaScript
【面试题】 webpack面试篇
【面试题】 webpack面试篇
535 0
|
JSON JavaScript 前端开发
看了涡流大佬的面试文章的总结(Webpack)
看了涡流大佬的面试文章的总结(Webpack)
|
缓存 自然语言处理 监控
webpack常见面试题【原理向】
webpack常见面试题【原理向】
|
存储 自然语言处理 JavaScript
手写webpack核心原理,再也不怕面试官问我webpack原理
手写实现webpack核心代码,学习webpack核心原理。
712 0
手写webpack核心原理,再也不怕面试官问我webpack原理
|
3月前
|
JavaScript
webpack打包TS
webpack打包TS
138 60