image.png

WebPack面试题汇总

Netty+SpringBoot 开发即时通讯系统

需要请假危险：cwgeek66

1，Webpack有什么作用，谈谈你对它的了解

如今的前端网页功用丰厚，特别是SPA（single page web application 单页应用）技术盛行后，JavaScript的复杂度增加和需求一大堆依赖包，还需求处理Scss、Less……新增款式的扩展写法的编译工作。Webpack 最中心的功用就是完成静态模块打包，当Webpack 处置应用程序时，会递归构建一个依赖关系图，其中包含应用程序需求的每个模块，然后将这些模块打包成一个或多个bundle资源包。

事实上，如今市面上最盛行的三个前端框架，能够说和webpack都曾经严密相连，官方框架都推出了对应的webpack构建工具，常见的组合为React+WebPack、Vue+WebPack以及Angluar+WebPack。

2，前端项目为什么要停止打包和构建

之所以要停止打包和构建，是从代码开发层面和部署层面来思索的：

代码层面

打包能够使体积更小（Tree-shaking、紧缩、兼并），加载更快
编译高级言语和语法（TS、ES6、模块化、scss）
兼容性和错误检查（polyfill、postcss、eslint）
研发流程层面

统一、高效的开发环境
统一的构建流程和产出规范
集成公司构建标准（提测、上线）

3，gulp/grunt与Webpack有哪些区别

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

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

而webpack的项目构建则是基于入口的，webpack会自动地递归解析入口所需求加载的一切资源文件，然后用不同的Loader来处置不同的文件，用Plugin来扩展webpack功用。

image.png

从构建规则上来说，gulp和grunt需求开发者将前端构建过程拆分多个Task，并合理控制一切Task的调用关系，webpack需求开发者找到入口，并需求分明关于不同的资源应该运用什么Loader 做何种解析和加工的。

4，Webpack提供的根本功用有哪些

目前，Webpack支持如下一些常见的功用（详细视版本而定）：

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：紧缩 JavaScript、CSS、html 代码，紧缩兼并图片等
代码分割：提取多个页面的公共代码、提取首屏不需求执行局部的代码让其异步加载
模块兼并：在采用模块化的项目有很多模块和文件，需求构建功用把模块分类兼并成一个文件
自动刷新：监听本地源代码的变化、自动构建、刷新阅读器
代码校验：在代码被提交到仓库前需求检测代码能否契合标准，以及单元测试能否经过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

5，简单描绘下webpack的构建流程

Webpack的运转流程是一个串行的过程，从启动到完毕会会依次执行以下流程：

初始化编译参数：从配置文件和shell命令中读取与兼并参数；
开端编译：依据上一步得到的参数初始化Compiler对象，加载一切配置的Plugin，执行对象的 run 办法开端执行编译；
肯定入口：依据配置中的 entry 找出一切的入口文件；
编译模块：从入口文件触发，调用一切配置的Loader对模块停止翻译，再找出该模块依赖的模块，然后递归本步骤直到一切入口依赖的文件都停止翻译；
完成模块编译：在经过第4步运用 Loader 翻译完一切模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图。
输出资源：依据依赖关系图，组装成一个个包含多个模块的Chunk，再把每个Chunk转化成一个单独的文件参加到输出列表，依据配置肯定输出的途径和文件名，输出。
输出完成：在肯定好输出内容后，依据配置肯定输出的途径和文件名，把文件内容写入到文件系统。
在以上过程中，Webpack 会在特定的时间点播送出特定的事情，插件在监听到感兴味的事情后会执行特定的逻辑，并且插件能够调用 Webpack 提供的 API 改动 Webpack 的运转结果。

6，单引见下Webpack的根本概念

Entry：入口，Webpack 执行构建的第一步将从 Entry 开端，通知webpack要运用哪个模块作为构建项目的入口，默许为./src/index.js。
output ：出口，通知webpack在哪里输出它打包好的代码以及如何命名，默许为./dist
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开端递归找出一切依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码兼并与分割。
Loader：模块转换器，用于把模块原内容依照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定机遇会播送出对应的事情，插件能够监听这些事情的发作，在特定机遇做对应的事情。

image.png

7，简单描绘下Webpack的工作原理

webpack经过入口文件逐层遍历到模块依赖，停止代码剖析、代码转换，最终生成可在阅读器运转的打包后代码。实质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处置应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需求的每个模块，然后将一切这些模块打包成一个或多个bundle包。并且在3.0版本之后，Webpack还肩负起了优化项目的义务。

8，如何进步Webpack的构建速度

随着前端项目触及到的页面越来越多，功用和业务代码也会随着增加，相应的webpack的构建时间也会越来越久，假如构建时间过长，会大大降低工作效率。以下是常见的进步Webpack项目构建的措施：

多入口状况下，运用CommonsChunkPlugin来提取公共代码。
经过externals配置来提取常用库。
应用DllPlugin和DllReferencePlugin预编译资源模块经过DllPlugin来对那些我们援用但是绝对不会修正的npm包来停止预编译，再经过DllReferencePlugin将预编译的模块加载进来。
运用Happypack 完成多线程加速编译。
运用webpack-uglify-paralle来提升uglifyPlugin的紧缩速度，webpack-uglify-parallel采用了多核并行紧缩来提升紧缩速度。
运用Tree-shaking和Scope Hoisting来剔除多余代码
优化Loader配置

9，Webpack是怎样配置单页应用和多页面应用的

单页应用能够了解为Webpack的规范形式，直接在entry中指定单页应用的入口即可。多页应用的话，能够运用webpack的 AutoWebPlugin来完成简单自动化的构建，但是前提是项目的目录构造必需恪守他预设的标准。多页应用中需求留意以下几点：

每个页面都有公共的代码，能够将这些代码抽离出来，防止反复的加载。比方，每个页面都援用了同一套css款式表。
随着业务的不时扩展，页面可能会不时的追加，所以一定要让入口的配置足够灵敏，防止每次添加新页面还需求修正构建配置。

事实上，单页应用程序和多页应用程序的 webpack配置文件其实绝大局部都还是相同的，只不过多页的配置需求在单页配置的根底上顾及到多个页面而已，loader、output、plugins这些根本都不需求改动，需求改动的普通都是入口文件 entry，假如你用到了 抽离css款式的插件 extract-text-webpack-plugin、自动模板插件 html-webpack-plugin的话，那么还需求对这两个插件停止额外的改写。

10，Webpack中Loader的作用是什么，有哪些常见的Loader

Loader 是webpack中提供了一种处置多种文件格式的机制，由于Webpack默许只支持辨认JS和JSON，但是Webpack打造的概念是“一切皆模块”，想要完成这个概念，就需求运用Loader。Loader相当于翻译官，能够将其他类型资源停止预处置，并对模块的"源代码"停止转换。

常见的Loader有如下一些：

less-loader：将less文件编译成css文件
css-loader：将css文件变成commonjs模块加载到js中，模块内容是款式字符串
style-loader：创立style标签，将js中的款式资源插入标签内，并将标签添加到head中生效
ts-loader：打包编译Typescript文件
url-loader：将文件转换为base64 URI
source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试
babel-loader：将ES6转化为ES5
file-loader：把⽂件输出到⼀个⽂件夹中，在代码中经过相对 URL 去引⽤输出的⽂件
11，Plugin有什么作用，有哪些常见的Plugin
Plugin的主要做用就是为理解决Loader 无法完成的事情，比方打包优化和代码紧缩等。经过扩展 Webpack 功用，在构建流程里注入钩子来处置很多Loader无法处置的工作，给 Webpack 带来了很大的灵敏性。

通常，Webpack经过plugins属性来配置需求运用的插件列表。plugins属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时能够经过结构函数传入这个组件支持的配置属性。

常见的Plugin插件有如下一些：

html-webpack-plugin：处置html资源，默许会创立一个空的HTML，自动引入打包输出的一切资源（js/css）。
mini-css-extract-plugin：打包过后的css在js文件里，该插件能够把css单独抽出来。
clean-webpack-plugin：每次打包时分，CleanWebpackPlugin插件就会自动把上一次打的包删除。

12，简述下Webpack sourceMap的作用

当我们运用webpack打包代码出错的时分， 假如不运用sourceMap，我们只能晓得打包后的代码第几行出错，并不晓得对应源代码哪里出了错，所以需求它来做源代码和目的代码的映射，而sourceMap的主要作用就是灾打包后将文件映射到源代码，用于定位错误位置。sourceMap的配置如下所示：

module.exports = { devtool: 'source-map', // 运用sourceMap ...}

同时，加不同前缀的意义也不同：

inline：不生成映射关系文件，打包进main.js
cheap：只准确到行，不准确到列，打包速度快；尽管业务代码，不论第三方模块
module：不只管业务代码，而且管第三方代码
eval：执行效率最快，性能最好
同时，依据官网文档引见，配置source-map方式打包后，项目打包速度会变慢，由于打包过程中会构建映射关系，比拟消耗性能。因而，我们需求对开发环境和线上环境停止辨别：

开发者形式下(development)：去运用sourceMap的话，倡议运用cheap-module-eval-source-map的方式，这种方式提示错误比拟全，同时打包速度也是比拟快的。
消费者形式下(production)：运用cheap-module-source-map能够快速定位问题。
同时，sourceMap还能够经过nginx设置将.map文件只对白名单开放。

13，什么是模热更新，如何配置模块热更新

模块热更新是webpack的一个功用，它能够使得代码修正之后，不用刷新阅读器就能够更新。在应用过程中交换添加删出模块，无需重新加载整个页面，是高级版的自动刷新阅读器。优点是只更新变卦内容，以俭省珍贵的开发时间。调整款式愈加快速，简直相当于在阅读器中更改款式。

开启Webpack热更新需求借助webpack.HotModuleReplacementPlugin()，devServer开启hot。比方，完成热更新，只更新指定的js模块。

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

14，什么是模块懒加载

懒加载或者按需加载，是一种很好的优化网页或应用的方式。实践上是先把代码在一些逻辑断点处别离开，然后在一些代码块中完成某些操作后，立刻援用或援用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了加载的体积。

在WebPack中，完成模块/文件的懒加载需求用到prefetch和preloading等关键字。比方，先加载主业务文件，然后应用网络闲暇时间异步加载其他组件。

import(/* webpackPrefetch: true / ‘LoginModal’);

假如需求和主业务文件一同加载，异步加载组件，能够运用下面的方式。

import(/ webpackPreload: true */ ‘ChartingLibrary’);

15，什么是长缓存，在webpack中如何完成长缓存优化

Webpack打包的资源，最终都是在阅读器上呈现给用户，阅读器在用户访问页面的时分，为了加快加载速度，会对用户访问的静态资源停止存储。阅读器缓存能够分为强缓存和协商缓存两种。

强缓存是指在不访问效劳器的状况下，直接从阅读器获取前端资源。读取资源的方式能够从缓存中读取，也能够从磁盘中读取。完成的方式是在响应头设置Expires字段或者Cache-Control字段。

协商缓存是指在访问效劳器的状况下，效劳器告知阅读器文件没变化，这时效劳器会返回304，能够直接应用缓存中的资源。完成协商缓存的方式是两对组合(响应头/恳求头)：Last-Modified/If-Modified-Since ；ETag/If-None-Match。

关于长缓存，能够在output给出输出的文件制定chunkhash，并且别离经常更新的代码和框架代码，经过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。

参考：webpack4配置阅读器长缓存

16，polyfill和runtime有什么区别

babel-polyfill 的原理是当运转环境中并没有完成的一些办法，babel-polyfill会做兼容。babel-runtime 它是将es6编译成es5去执行。通常，我们运用es6的语法来编写应用，最终都会经过babel-runtime编译成es5。也就是说，不论阅读器能否支持ES6，只需是ES6的语法，它都会停止转码成ES5，所以就会产生很多冗余的代码。

babel-polyfill 它是经过向全局对象和内置对象的prototype上添加办法来完成的。比方运转环境中不支持Array.prototype.find 办法，引入polyfill, 我们就能够运用es6办法来编写了，但是缺陷就是会形成全局空间污染。

babel-runtime它不会污染全局对象和内置对象的原型，比方说我们需求Promise，我们只需求import Promise from 'babel-runtime/core-js/promise’即可，这样不只防止污染全局对象，而且能够减少不用要的代码。