1.谈一谈你对webpack的理解

webpack是一个打包模块化js工具，在webpack里一切文件皆模块，通过loader转化文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。

webpack可以看做是模块的打包机器：他做的事情是，分析你的项目结构，找到js模块以及其他的一些浏览器不能直接运行的扩展语言，例如：Sass，TS等，并将其打包为合适的格式以供浏览器使用。

2.webpack的工作原理

webpack可以看你做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言（Sass、TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，webpack还肩负起优化项目的责任。

3.webpack的打包原理

把一切都视为模块：不管是CSS、JS、Image还是HTML都可以互相引用，通过定义entry.js，对所有依赖的文件进行跟踪，将各个模块通过loader和plugin处理，然后打包在一起。

按需加载：打包过程中Webpack通过Code Splitting功能将文件分为多个chunks，还可以将重复的部分单独提取出来作为commonChunk，从而实现按需加载。把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按需加载。

4.什么是bundle，什么是chunk，什么是module？

bundle：是由webpack打包出来的文件。

chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。

module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。

5.什么是Loader？什么是Plugin？

Loader是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中

Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程（生命周期）。

6.入口entry和出口output

entry：入口，webpack执行构建的第一步将从entry开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js。

output：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist。

7. webpack的基本功能有哪些？

代码转换：TS -> JS、SCSS ->CSS......

文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。

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

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

自动刷新：监听本地源代码的变化，自动构建，刷新浏览器。

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

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

8.说说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更倾向于前端开发者的思路。

9.webpack是解决什么问题而生的？

如果像以前开发一个html文件可能会引用十几个js文件，而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等的语法，less,sass等CSS预处理都不能很好的解决......，此时就需要一个处理这些问题的工具--webpack。

10.你是如何提高webpack构建速度的？

多入口情况下，使用CommonsChunkPlugin来提取公共代码。

通过externals配置来提取常用库。

利用DullPlugin和DLLReferencePlugin预编译资源模块通过DLLPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DLLReferencePlugin预编译的模块加载进来。

使用Happypack实现多线程加速编译。

使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。

原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度。

使用Tree-shaking和Scope Hoisting来剔除多余代码。

11.npm打包时需要注意哪些？如何利用webpack来更好的构建？

npm是目前最大的JavaScript模块仓库，里面有来自全世界开发者上传的可复用模块。

你可能只是JS模块的使用者，但是有些情况你也会去选择上传自己开发的模块。

关于npm模块上传的方法可以去官网上进行学习，这里只讲解如何利用webpack来构建。

npm模块需要注意一下问题：

要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则。

npm模块使用者的环境是不确定的，很有可能并不支持ES6,所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。

npm包大小应该尽量小（有些仓库会限制包大小）。

发布的模块不能将依赖的模块也一同打包，应该让用户选择性的去自行安装，这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。

UI组件类的模块应该将依赖的其他资源文件，例如：css文件也需要包含在发布的模块里。

12.前端为什么要进行打包和构建？

代码层面：

体积更小（Tree-shaking、压缩、合并），加载更快。

编译高级语言和语法（TS、ES6、模块化、scss）。

兼容性和错误检查（polyfill，postcss，eslint）。

研发流程层面：

统一、高效的开发环境

统一的构建流程和产出标准

集成公司构建规范（提测、上线）

13.webpack的构建流程是什么？从读取配置到输出文件这个过程尽量说全

webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

初始化参数：从配置文件和Shell语句中读取与合并参数，得到最终的参数；

开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；

确定入口：根据配置中的entry找出所有的入口文件；

编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

完成模块编译：在经过第4步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的关系；

输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把内容写入到文件系统。

在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变webpack的运行结果。

14.怎么配置单页应用？怎么配置多页应用？

单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可。

多页应用的话，可以使用webpack的AutoWebPlugin来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。多页应用中要注意的是：

每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表

随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置

15.Loader机制的作用是什么？

webpack默认只能打包js文件，配置里的module.rules数组配置了一组规则，告诉webpack在哪遇到哪些文件时应使用哪些loader去加载和转换打包成js。

注意：

user属性的值需要是一个由Loader名称组成的数组，Loader的执行顺序是由后到前的；

每一个Loader都可以通过URL querystring的方式传入参数，例如css-loader?minimize中的minimize告诉css-loader要开启CSS压缩。

16.有哪些常见的Loader？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件。

url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。

source-map-loader：加载额外的Source Map文件，以方便断点调试。

image-loader：加载并且压缩图片文件。

babel-loader：把ES6转换成ES5。

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

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

eslint-loader：通过ESLint检查JavaScript代码。

17.常见Plugins

HTMLWebpackPlugin自动在打包结束后生成html文件，并引入bundles.js

cleanwebPackPlugin打包自动删除上次打包文件

18.ExtractTextPlugin插件的使用

ExtractTextPlugin插件的作用是提取出JavaScript代码里的CSS到单独的文件

对此你可以通过插件的filename属性，告诉插件输出的CSS文件名称是通过[name]_[contenthash:8].css字符串模板生成的，里面的[name]代表文件名称，[contenthash:8]代表根据文件内容算出的8位hash值，还有很多配置选项可以在ExtractTextPlugin的主页上查到

19.sourceMap

是一个映射关系，将打包后的文件隐射到源代码，用于定位报错位置

配置方式：例如：devtool：'source-map'

加不同前缀意义：

inline：不生成映射关系文件，打包进main.js

cheap：1.只精确到行，不精确到列，打包速度快

2.只管业务代码，不管第三方模块

module：不仅管业务代码，而且管第三方代码

eval：执行效率最快，性能最好

最佳实践：

开发环境：cheap-module-eval-source-map

线上环境：cheap-module-source-map

20.热模块更新

借助webpack.HotModuleReplacementPlugin()，devServer开启hot

场景1：实现只刷新css，不影响js

场景2：js中实现热更新，只更新指定js模块

if(module.hot){module.hot.accept('./library.js',function(){// Do something with the updated library module...});
)

21.webpack如何配置多入口文件？

entry:{home:resolve(__dirname,"src/home/index.js"),about:resolve(__dirname,"src/about/index.js")
}

用于描述入口的对象，你可以使用如下属性：

dependOn：当前入口依赖的入口。他们必须在该入口被加载前被加载。
filename：指定要输出的文件名称
import：指定library选项，为当前entry构建一个library。
runtime：运行时chunk的名字。如果设置了，就会创建一个新的运行时的chunk。在webpack5.43.0之后可将其设置为false以避免一个新的运行时chunk
publicPath：当前入口的输出文件在浏览器中被引用时，为它们指定一个公共URL地址

22.babel相关：polyfill以及runtime区别，ES stage含义，preset-env作用等等

1.polyfill以及runtime的区别

babel-polyfill的原理是当运行环境中并没有实现的一些方法，babel-polyfill会做兼容。

babel-runtime它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译。也就是说，不管浏览器是否支持es6，只要是es6的语法，他都会进行转码，所以就有很多冗余的代码。

babel-polyfill它是通过全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Array.protoytpe.find方法，引入polyfill，我们就可以使用es6方法编写了，但是缺点就是会造成全局空间污染。

babel-runtime：他不会污染全局对象和内置对象的原型，比如我们需要Promise，我们只需要import Promise from 'babel-runtime/core-js/promise'即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。

2.stage-x：指处于某一阶段的js语言提案

Stage 0 - 设想（Strawman）:知识一个想法，可能有Babel插件。

Stage 1 - 建议（Proposal）:这是值的跟进的。

Stage 2 - 草案（Draft）：初始规范。

Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。

Stage 4 - 完成（Finished）：将添加到下一个年度版本发布中。

3.理解babel-preset-env

babel-preset-es2015：可以将es6的代码编译成es5

babel-preset-es2016：可以将es7的代码编译为es6

babel-preset-es2017：可以将es8的代码编译为es7

babel-preset-latest：支持现有所有ECMAScript版本的新特性

23.什么是模热更新？有什么优点？

模块热更新是webpack的一个功能，他可以使得代码修改之后，不用刷新浏览器就可以更新。

在应用过程中替换添加删除模块，无需重新加载整个页面，是高级版的自动刷新浏览器。

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

24.lazy loading（模块懒加载）

借助import（）语法异步引入组件，实现文件懒加载：prefetch,preloading

webpack提倡多写异步代码，提升代码利用率，从而提升页面性能

先加载主业务文件，prefetch利用网络空闲时间，异步加载组件

import(/* webpackPrefetch:true / 'LoginModel');

preload和主业务文件一起加载，异步加载组件

import(/ webpackPreload:true */ 'ChartingLibrary');

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

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

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

26.什么是Tree-shaking？

指打包中去除那些引入了但是在代码中没用到的死代码。在webpack中js tree-shaking通过UglifyJSPlugin来进行，css中通过purify-CSS来进行。

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

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

面试常问 webpack 面试题相关推荐

linux bsp笔试题,Linux BSP工程师面试常问问题汇集.pdf
Linux BSP工程师面试常问问题汇集 Linux BSP 工程师面试常问问题汇集 TD 1．本文章遵从" 署名-非商业性使用 3.0 中国大陆 (CC BY-NC 3.0 CN)&quo ...
面向对象程序设计(c++)面试常问——for考研复试面试
关于c++的一些面试常问问题(考研面试编程语言) 前言: 本人22考研党,已上岸,发一些复试准备整理的资料作为对考研准备的一个收尾.由于近几年基本都是线上复试,线上的话会更加注重概念的考察,本人在复试 ...
Java基础（以及面试常问问题）
1.Vector,ArrayList, LinkedList的区别(面试常问到的) 三者都是实现集合框架中的List,也就是所谓有序集合,因此具体功能比较近似,比如都提供按照位置进行定位.添加或删除的 ...
还不看看嘛！互联网技术面试常问问题汇总及回答技巧总结，听说看过的都面试上大厂了~（doge）
这几天回顾了一下自己发布的文章,除了修改一些排版和内容上的错误.还发现了一个bug--我发布的基本上都是一些面试题.大家看了之后,虽然对题型会有了解,但是如何回答却没有一个参考的技巧.于是,就有了这篇 ...
操作系统面试常问——for考研复试面试
关于操作系统的一些面试常问问题前言: 本人22考研党已上岸,发一些复试准备整理的资料作为对考研准备的一个收尾.由于近几年基本都是线上复试,线上的话会更加注重概念的考察,本人在复试准备期间搜集了面试题 ...
数据库面试常问——for考研复试面试
关于数据库的一些面试常问问题前言: 本人22考研党,已上岸,发一些复试准备整理的资料作为对考研准备的一个收尾.由于近几年基本都是线上复试,线上的话会更加注重概念的考察,本人在复试准备期间搜集了面试题 ...
java8 垃圾收集_面试官：怎么做JDK8的垃圾收集器的调优(面试常问)
看着面试官真诚的眼神,心中暗想看起来年纪轻轻却提出如此直击灵魂的问题.擦了擦额头上汗,我稍微调整了一下紧张的情绪,对面试官说: 在jdk8中有serial收集器.parallel收集器.cms收集器. ...
GET 和 POST 的区别(重要,面试常问)
GET 和 POST 的区别(重要,面试常问) 1.GET 在浏览器回退时是无害的,而 POST 会再次提交请求. (get:不会再次发送请求:post:浏览器会继续向URI发送请求) 2.GET 产 ...
给大家提供一些面试常问的问题
给大家提供一些面试常问的问题 1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以 ...

面试常问 webpack 面试题