发现

任务

客服工单

发文章

有关Webpack口试题

源代码 2024-9-9 06:08:15 50 0 来自 中国
一、说一下对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功能，不但范围于功能的加载

举报

您需要登录后才可以回帖 登录 | 立即注册
源代码
优秀作者 助人为乐 人气作者
文章
380
问答
380
粉丝
0

所属分类: 问答交流

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-10-18 18:23, Processed in 0.165011 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表