webpack面试题总结

本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新

1.webpack打包原理

把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。

2.webpack的优势

(1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

(2)能被模块化的不仅仅是 JS 了。

(3) 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

(4)扩展性强,插件机制完善

3.什么是loader,什么是plugin

loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件,对于其他资源如css,img等,是没有办法加载的,这时就需要对应的loader将资源转化,从而进行加载。

plugin用于扩展webpack的功能。不同于loader,plugin的功能更加丰富,比如压缩打包,优化,不只局限于资源的加载。

4.什么是bundle,什么是chunk,什么是module

bundle:是由webpack打包出来的文件

chunk:是指webpack在进行模块依赖分析的时候,代码分割出来的代码块

module:是开发中的单个模块

5.webpack 和 gulp 的区别?

webpack是一个模块打包器,强调的是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源都看成是模块,通过loader和plugin对资源进行处理。

gulp是一个前端自动化构建工具,强调的是前端开发的工作流程,可以通过配置一系列的task,第一task处理的事情(如代码压缩,合并,编译以及浏览器实时更新等)。然后定义这些执行顺序,来让glup执行这些task,从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起,也不能构建不同模块之间的依赖关系。

6.如何自动生成webpack配置文件?

webpack-cli/vue-vli

7.什么是模热更新?有什么优点?

模块热更新是webpack的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新。在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器。

优点:只更新变更内容,以节省宝贵的开发时间。调整样式更加快速,几乎相当于在浏览器中更改样式

8.webpack-dev-server 和 http服务器的区别

webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,比传统的http服务对开发更加有效。

9.什么是长缓存?在webpack中如何做到长缓存优化?

浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。

在webpack中,可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码,通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。

10.什么是Tree-sharking?

tree-sharking 是指在打包中去除那些引入了,但是在代码中没有被用到的那些死代码。

27、前端知识点--webpack面试题(二)的更多相关文章

  1. 前端小白webpack学习(二)

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  2. 25、前端知识点--webpack篇之面试考点

    前端面试之webpack篇 https://blog.csdn.net/sinat_17775997/article/details/78122999 关于webpack的面试题 随着现代前端开发的复 ...

  3. js 整理 前端知识点 前端面试题 (2020)(vue)

    数据类型 字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol. 引用数据类型:对象(Object).数组(Array). ...

  4. 23、前端知识点--webpack的使用详解

    Webpack 是当下最热门的前端资源模块化管理和打包工具. https://www.cnblogs.com/zhangruiqi/p/7656206.html

  5. 前端知识点回顾——Javascript篇(二)

    JavaScript的解析顺序 第一阶段:编译期 寻找关键字声明的变量.函数声明的变量,同时会对变量进行作用域的绑定 var声明的变量,在编译期会赋一个默认值undefined,变量提升的特性. ES ...

  6. 前端小白webpack学习(一)

    俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...

  7. 一个新手后端需要了解的前端核心知识点之margin(二)

    最近以开发自己博客网站为出发点开始决心打牢几个非常重要的前端知识点: margin,这个在我刚刚接触编程的时候留下的困扰的东西,一开始只想着怎么快速开发自己的网站,别人的终归是别人的,想要挖墙脚,必须 ...

  8. 互联网公司前端初级Javascript面试题

    互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...

  9. Web前端开发工程师面试题

    Web前端开发工程师面试题1.说说css的优先级?2.在移动端中,常常使用tap作为点击事件,好处是?会带来什么问题?3.原生JS的window,onload与Jquery的$(document).r ...

随机推荐

  1. Java面试之基础篇(2)

    11.是否可以从一个static方法内部发出对非static方法的调用? 不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方法调用,而static方法调用 ...

  2. js自执行函数前加个分号是什么意思?

    1.(function(){alert("1")})()(function(){alert("2")})()报错 2.(function(){alert(&qu ...

  3. IIS6、IIS7.5设置网站默认首页方法(Directory Listing Denied)

    这篇文章主要介绍了IIS6.IIS7.5设置网站默认首页方法,如果不设置访问目录就会提示Directory Listing Denied,就是不允许列出文档,为了安全网站都会设置不设置默认,需要的朋友 ...

  4. B/S上传文件夹

    文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...

  5. luogu P1125 笨小猴 x

    P1125 笨小猴 题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设max ...

  6. github 的 fork 取消功能

    进入该 fork 目录后 找到 Settings 点击后拉到底 找到含有 Delete 字样的按钮点击 弹出的对话框输入你删除的这个项目名 后删除 链接

  7. [BZOJ1934][SHOI2007]Vote 善意的投票:最小割

    分析 先讲一下连边方法: \(S\)向意愿同意的人,意愿反对的人向\(T\),朋友之间互相连(其实好像意愿不同的朋友之间互相连就可以了,嘛,不管了),容量均为\(1\). 最小割即为答案. 可以理解为 ...

  8. git本地文件提交

    一.github在线上传文件夹 1.点击上传文件 2 .直接拖拽 直接拖拽即可上传文件夹及文件夹里面的文件.如果点击 choose your files 就只能上传单个文件. 二.通过git工具上传本 ...

  9. 《SQL Server 2012 T-SQL基础》读书笔记 - 1.背景

    几个缩写的全称:Data Definition Language (DDL), Data Manipulation Language (DML), and Data Control Language ...

  10. COUNT(*) vs COUNT(col)

    w https://www.percona.com/blog/2007/04/10/count-vs-countcol/