面试基础复习--webpack面试题(一)

山人Ll
202 阅读3分钟

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

建议先观看webpack官方文档，了解基础概念，然后看这些整理的面试真题，加深对概念的理解。每天量不多，后续会持续更新，，，

概念题

1.谈谈你对webpack的看法/介绍一下webpack

webpack是一个静态模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

2.介绍一下webpack的依赖图

当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理。 从 入口 开始，webpack 会递归的构建一个 依赖关系图，这个依赖图包含着应用程序中所需的每个模块，然后将所有模块打包为少量的 bundle —— 通常只有一个 —— 可由浏览器加载

3.常见的Loader有哪些

首先比较常见的css的loader:

  • style-loader 将css添加到DOM的内联样式标签style里
  • css-loader 允许将css文件通过require的方式引入，并返回css代码
  • less-loader 处理less
  • sass-loader 处理sass
  • postcss-loader 用postcss来处理CSS,扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
  • autoprefixer-loader 处理CSS3属性前缀，已被弃用，建议直接使用postcss 文件相关的loader:
  • file-loader 分发文件到output目录并返回相对路径
  • raw-loader：加载文件原始内容（utf-8）
  • source-map-loader：加载额外的 Source Map 文件，以方便断点调试
  • json-loader 加载 JSON 文件（默认包含）
  • file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
  • vue-loader：加载 Vue.js 单文件组件 检查代码相关loader:
  • eslint-loader：通过 ESLint 检查 JavaScript 代码
  • tslint-loader：通过 TSLint检查 TypeScript 代码
  • mocha-loader：加载 Mocha 测试用例的代码
  • url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体)

4.常见的Plugin有哪些

内置plugin:

  • CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。
  • UglifyJsPlugin，压缩和混淆代码。
  • HotModuleReplacementPlugin 热更新

其他plugin:

  • uglifyJsPlugin: 是 vue-cli 默认使用的压缩代码方式，用来对 js 文件进行压缩，从而减小 js 文件的大小，加速 load 速度。它使用的是单线程压缩代码，打包时间较慢，所以可以在开发环境将其关闭，生产环境部署时再把它打开。

  • ProvidePlugin：自动加载模块，代替require和import

  • html-webpack-plugin：简化 HTML 文件创建, (依赖于 html-loader)

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

  • terser-webpack-plugin: 支持压缩 ES6 (Webpack4)

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

  • mini-css-extract-plugin: 将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和 sourceMap。只能用在 webpack4 中.

  • serviceworker-webpack-plugin：为网页应用增加离线缓存功能

  • clean-webpack-plugin: 目录清理

  • ModuleConcatenationPlugin: 开启 Scope Hoisting

  • speed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)

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

参考

juejin.cn/post/684490…

avatar
文章
阅读
粉丝