精选文章 关于 webpack 的几个知识点

关于 webpack 的几个知识点

作者:yingjieweb 时间: 2020-07-27 07:49:11
yingjieweb 2020-07-27 07:49:11

最近几天备战秋招复习 webpack 的时候,发现一篇总结的比较好的博文,摘取几个相关的问题转载过来,同时根据自己的观点进行了部分调整,希望能够帮助有需要的人。原文链接:关于webpack的面试题总结

随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,比如 sass 和 less 的代码浏览器是不支持的, 但如果摒弃了这些开发框架,那么开发的效率将大幅下降。在众多前端工程化工具中,webpack 脱颖而出成为了当今最流行的前端构建工具。 然而大多数的使用者都只是单纯的会使用,而并不知道其深层的原理。希望通过以下的面试题总结可以帮助大家温故知新、查缺补漏,知其然而又知其所以然。

1. webpack 与 grunt、gulp 的不同?

三者都是前端构建工具,grunt 和 gulp 在早期比较流行,现在 webpack 相对来说比较主流,不过一些轻量化的任务还是会用 gulp 来处理,比如单独打包 CSS 文件等。

grunt 和 gulp 是基于任务和流(Task、Stream)的。类似 jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个 web 的构建流程。

webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件,然后用不同的 Loader 来处理不同的文件,用 Plugin 来扩展 webpack 功能。

所以总结一下:

  • 从构建思路来说
    • gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个 `Task`,并合理控制所有 `Task` 的调用关系。
      webpack 需要开发者找到入口,并需要清楚对于不同的资源应该使用什么 Loader 做何种解析和加工。
  • 对于知识背景来说
    • gulp 更像后端开发者的思路,需要对于整个流程了如指掌。 webpack 更倾向于前端开发者的思路。

2. 你为什么最终选择使用 webpack?

基于入口的打包工具除了 webpack 以外,主流的还有:rollup 和 parcel

从应用场景上来看:

  • webpack 适用于大型复杂的前端站点构建
  • rollup 适用于基础库的打包,如 vue、react
  • parcel 适用于简单的实验性项目,他可以满足低门槛的快速看到效果

由于 parcel 在打包过程中给出的调试信息十分有限,所以一旦打包出错难以调试,所以不建议复杂的项目使用 parcel

3. 有哪些常见的 Loader?解决什么问题?

  • babel-loader:把 ES6 转换成 ES5
  • eslint-loader:通过 ESLint 检查 JavaScript 代码
  • css-loader:加载 CSS,支持模块化、压缩、文件导入等特性
  • style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。
  • image-loader:加载并且压缩图片文件
  • file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件
  • url-loader:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
  • source-map-loader:加载额外的 Source Map 文件,以方便断点调试

4. 有哪些常见的Plugin?解决什么问题?

  • define-plugin:定义环境变量
  • commons-chunk-plugin:提取公共代码
  • uglifyjs-webpack-plugin:通过 UglifyES 压缩 ES6 代码
  • HTMLWebpackPlugin:webpack 在自定生成 html 时需要用到它,能自动引入 js/css 文件
  • MiniCssExtractPlugin:将 css 代码抽成单独的文件,一般适用于发布环境,生产环境用 css-loader

5. Loader 和 Plugin 的不同?

不同的作用

  • Loader 直译为"加载器"。webpack 将一切文件视为模块,但是 webpack 原生是只能解析 js 文件,如果想将其他文件也打包的话,就会用到 loader。 所以 Loader 的作用是让 webpack 拥有了加载和解析非JavaScript文件 的能力。
  • Plugin 直译为"插件"。Plugin 可以扩展 webpack 的功能,让 webpack 具有更多的灵活性。 在 webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 webpack 提供的 API 改变输出结果。

不同的用法

  • Loader 在 module.rules 中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个 Object,里面描述了对于什么类型的文件(test),使用什么加载器 (loader) 和使用的参数(options
  • Plugin 在 plugins 中单独配置。 类型为数组,每一项是一个 plugin 的实例,参数都通过构造函数传入。

6. 如何利用 webpack 来优化前端性能?

用 webpack 优化前端性能是指:优化 webpack 的输出结果,让打包的最终结果在浏览器运行快速高效。

  • 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用 webpack 的 UglifyJsPluginParallelUglifyPlugin来压缩JS文件, 利用cssnano(css-loader?minimize)来压缩 css
  • 利用 CDN 加速。在构建过程中,将引用的静态资源路径修改为CDN上对应的路径。可以利用 webpack 对于output参数和各loader 的 publicPath 参数来修改资源路径
  • 删除死代码(Tree Shaking)。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
  • 提取公共代码。

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

  1. 多入口情况下,使用 CommonsChunkPlugin 来提取公共代码
  2. 通过 externals 配置来提取常用库
  3. 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过 DllReferencePlugin将预编译的模块加载进来。
  4. 使用 Happypack 实现多线程加速编译
  5. 使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度
  6. 使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码
勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:spring cache相关注解介绍 @Cacheable、@CachePut、@CacheEvict

下一篇:快速排序法_______Java

您可能感兴趣

  • html5语义化结构元素_语义HTML5在文档结构中的秘密

    html5语义化结构元素 Look at the graph given above, and you can quickly see how extensively HTML 5 is growing popularity. The Semantic HTML 5 has almost replaced the HTML. Now, we are going to discuss Sema...

  • Webview.apk —— Google 官方的私有插件化方案

    简介: 在 Android 跨入 5.0 版本之后,我们在使用 Android 手机的过程中,可能会发现一个奇特的现象,就是手机里的 WebView 是可以在应用商店升级,而不需要跟随系统. 在 Android 跨入 5.0 版本之后,我们在使用 Android 手机的过程中,可能会发现一个奇特的现象,就是手机里的 WebView 是可以在应用商店升级,而不需要跟随系统的。 这一点在 iOS...

  • 【STM32F429开发板用户手册】第38章 STM32F429的FMC总线应用之是32路高速IO扩展

    最新教程下载:http://www.armbbs.cn/forum.php?mod=viewthread&tid=93255 第38章 STM32F429的FMC总线应用之是32路高速IO扩展 本章教程为大家讲解利用STM32429的FMC总线扩展出32路高速IO,且使用简单,实际项目中也比较有实用价值。 目录 第38章 STM32F429的FMC总线应用之是32路高速IO扩展 38.1 初...

  • 【计算机网络】第七章:网络安全

    【计算机网络】第七章:网络安全 目录 网络安全问题概述 1.1.计算机网络面临的安全性威胁 1.2.被动攻击和主动攻击 1.3.计算机网络通信安全的目标 1.4.恶意程序(rogue program) 1.5.计算机网络安全的内容 1.6.一般的数据加密模型 两类密码体制 一、对称密钥密码体制 1.1.对称密钥的缺点与优点 1.2.数据加密标准 DES 1.3.DES 的保密性 二、公钥密码...

  • Web端即时通讯实践干货:如何让WebSocket断网重连更快速?

    本文作者网易智慧企业web前端开发工程师马莹莹。为了提升内容质量,收录时有修订和改动。 1、引言 在一个完善的即时通讯IM应用中,WebSocket是极其关键的一环,它为基于Web的即时通讯应用提供了一种全双工的通信机制。但为了提升IM等实际应用场景下的消息即时性和可靠性,我们需要克服WebSocket及其底层依赖的TCP连接对于复杂网络情况下的不稳定性,即时通讯的开发者们通常都需要为其设计...

  • 工作流学习2(书本)

    1、流程引擎的创建。 1.1、ProcessEngineConfiguration的buildProcessEngine方法 使用ProcessEngineConfiguration的create方法可以得到ProcessEngineConfiguration的实例。ProcessEngineConfiguration中提供了一个buildProcessEngine方法,该方法返回一个Pro...

  • Yolo系列详解

    零、图像基本概念 图像表示为二维的矩阵  灰阶图像 0-255,0表示黑色,255表示白色,其余表示灰色。 图像的坐标轴   彩色图像  注意:颜色信息对于任务有时候有用,有时候没用。 一、什么是目标检测 目标检测是计算机视觉中的经典的原子问题,即通过输入的图像来完成物体的检测,它需要解决两个问题: 物体在哪里 物体是什么 目标检测算法的传统实现 sift hog 等算法。这些算法的...

  • hualinux 进阶 1.22:k8s调度器(整理)

    目录 一、调度器知识点 二、调度流程 学好k8s对调度器简单做一下了解也是很在帮助的。 可以先学习官网的《Kubernetes 调度器》 一、调度器知识点 在 Kubernetes 项目中,默认调度器的主要职责,就是为一个新创建出来的 Pod,寻找一个最合适的节点(Node)。 而这里“最合适”的含义,包括两层: 从集群所有的节点中,根据调度算法挑选出所有可以运行该 Pod 的节点; 从第一...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。