1、Webpack的作用是什么，说说你对它的理解。现在的前端网页功能丰富，尤其是SPA（单页Web应用）技术流行之后，JavaScript的复杂度增加，需要大量的依赖包，Scss的编译工作，Less...新样式的扩展写法需要解决。Webpack的核心功能是实现静态模块打包。Webpack在处理一个应用程序时，会递归构建一个依赖图，其中包含了应用程序需要的每一个模块，然后将这些模块打包成一个或多个bundle资源包。事实上，市面上最流行的三个前端框架可以说是和webpack结下了不解之缘。官方框架都推出了相应的webpack构建工具。常见的组合有React+WebPack、Vue+WebPack和Angluar+WebPack。2、前端项目为什么要打包构建？之所以打包构建是从代码开发部署层面考虑：在代码层面打包可以让体积更小（Tree-shaking,compression,merging），加载更多快速编译高级语言和语法（TS,ES6,模块化,scss)兼容性和查错(polyfill,postcss,eslint)研发流程层面统一高效的开发环境统一构建流程和输出标准统一公司构建规范(test,launch)3.有什么区别gulp/grunt和Webpack？这三个都是前端构建工具。Grunt和gulp在早期比较流行。现在webpack比较主流，但是一些轻量级的任务还是会用到gulp。处理，比如单独打包CSS文件。Grunt和gulp都是基于任务和流（Task,Stream）的。与jQuery类似，找到一个（或一种类型的）文件，对其执行一系列链式操作，并更新流上的数据。整个链条操作构成一个任务，多个任务构成整个建网过程。webpack的项目构建是基于入门的。Webpack会在入口处自动递归解析所有需要加载的资源文件，然后使用不同的Loader处理不同的文件，使用Plugins来扩展webpack的功能。在构建规则上，gulp和grunt要求开发者将前端构建过程拆分成多个任务，合理控制所有任务的调用关系。Webpack需要开发者找到入口点，知道不同的资源应该使用什么样的Loader。什么样的分析和处理。4、Webpack提供的基本功能有哪些目前Webpack支持以下常用功能（视版本而定）：代码转换：TypeScript编译成JavaScript、SCSS编译成CSS等文件优化：压缩JavaScript、CSS、HTMLcode,compressandmergepicturesandothercodesegmentation：提取多个页面的公共代码，将不需要在首屏执行的代码提取出来，让其异步加载合并到一个文件中自动刷新：监控本地源代码变更、自动构建、刷新浏览器代码校验：代码提交仓库前，需要检查代码是否符合规范，单元测试是否通过自动发布：更新代码后，自动构建上线发布代码并将其传输到发布系统。5、简述webpack的构建过程webpack的运行过程是一个串行过程，从头到尾会依次执行以下过程：初始化编译参数：从配置文件和shell命令中读取并合并参数；开始编译：根据上一步获取的参数初始化Compiler对象，加载所有配置好的Plugins，执行对象的run方法开始编译；判断入口：根据配置中的入口找到所有入口文件；编译模块：从入口文件触发，调用所有配置的Loader对模块进行翻译，找出模块依赖的模块，然后递归此步骤，直到入口依赖的所有文件都翻译完；完成模块编译：在第4步中使用Loader翻译完所有模块后，得到每个模块翻译后的最终内容和它们之间的依赖关系图。输出资源：根据依赖图，组装成包含多个模块的chunk，然后将每个chunk转换成一个单独的文件加入输出列表，根据配置确定输出路径和文件名，输出。输出完成：确定输出内容后，根据配置确定输出路径和文件名，将文件内容写入文件系统。上述过程中，Webpack会在特定的时间点广播特定的事件，插件会在监听到感兴趣的事件后执行特定的逻辑，插件可以调用Webpack提供的API来改变运行Webpack的结果。整体流程如下图所示。6.简单介绍一下WebpackEntry的基本概念：入口，Webpack执行构建的第一步会从Entry开始，告诉webpack使用哪个模块作为构建项目的入口，默认是./src/index.js。output:export，告诉webpack将其打包后的代码输出到哪里以及如何命名，默认为./distModule:module，Webpack中一切都是模块，模块对应文件。Webpack会递归地从配置的Entry中查找所有依赖的模块。Chunk：代码块，一个Chunk由多个模块组成，用于代码合并和拆分。Loader：模块转换器，用于将模块原有的内容按要求转换成新的内容。Plugin：扩展插件，在Webpack构建过程的特定时间广播相应的事件，插件可以监听这些事件的发生，并在特定的时间做相应的事情。7.简述Webpack的工作原理。webpack通过入口文件逐层遍历模块依赖，进行代码解析和代码转换，最终生成打包好的可以在浏览器中运行的代码。本质上，webpack是现代JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有这些模块打包到一个或多个包中。并且在3.0版本之后，Webpack也肩负起了项目优化的重任。8、如何提高webpack的构建速度随着前端项目涉及的页面越来越多，功能和业务代码也会越来越多，相应的webpack构建时间也会越来越长。如果施工时间过长，会大大降低工作效率。以下是Webpack项目构建的常用改进措施：在多个入口的情况下，使用CommonsChunkPlugin抽取公共代码。通过外部配置提取常用库。使用DllPlugin和DllReferencePlugin预编译资源模块将那些我们引用但永远不会修改的npm包通过DllPlugin预编译，然后通过DllReferencePlugin加载预编译模块。使用Happypack实现多线程加速编译。使用webpack-uglify-paralle提高uglifyPlugin的压缩速度，webpack-uglify-parallel使用多核并行压缩提高压缩速度。使用Tree-shaking和ScopeHoisting来消除冗余代码并优化Loader配置Can。对于多页面应用，可以使用webpack的AutoWebPlugin来完成简单的自动化构建，但前提是项目的目录结构必须符合其预设的规范。多页面应用需要注意以下几点：每个页面都有公共代码，可以提取出来避免重复加载。例如，每个页面引用同一组css样式表。随着业务不断扩大，页面可能会不断增加，所以入口的配置要足够灵活，避免每次增加新页面都需要修改构建配置。其实大部分单页应用和多页应用的webpack配置文件还是一样的，只是多页配置需要在单页配置的基础上兼顾多个页面，loader，output，插件基本上不需要更改。需要改的一般是入口文件入口。如果使用提取css样式的插件extract-text-webpack-plugin和自动模板插件html-webpack-plugin，那么需要修改这两个插件进行额外的重写。10、Webpack中Loader的作用是什么，常见的有哪些LoaderLoader是webpack中处理多种文件格式的一种机制，因为Webpack默认只支持识别JS和JSON，但是Webpack创建的概念是“一切是一个模块”，要实现这个概念，就需要用到Loader。Loader相当于一个翻译器，可以对其他类型的资源进行预处理，将模块的“源代码”进行转换。常见的Loader如下：less-loader：将less文件编译成css文件css-loader：将css文件转为commonjs模块加载到js中，模块内容为样式字符串style-loader:创建style标签并转换js将标签中的style资源插入到标签中，并将标签添加到head中生效断点调试babel-loader:ES6toES5file-loader:输出文件到文件夹,通过相对URL引用代码中的输出文件11、Plugin的作用是什么，有哪些共同点PluginPlugin的主要作用是解决Loader无法实现的东西，比如打包优化，代码压缩。通过扩展Webpack的功能，在构建过程中注入hooks来处理很多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.简述WebpacksourceMap的作用。当我们使用webpack打包代码报错的时候，如果不使用sourceMap，我们只能知道打包后的代码是哪一行出错了，并不知道对应的源码哪里错了，所以我们need用于映射源代码和目标代码，sourceMap的主要作用是灾难打包后将文件映射到源代码，用于定位错误位置。sourceMap的配置如下：module.exports={devtool:'source-map',//usesourceMap...}同时，加上不同前缀的意义也不同：inline：无映射关系文件生成，并打包到main中。jscheap：只精确到行，不精确到列，打包速度快；只管业务代码，不管第三方模块module:不管业务代码，也管第三方代码eval:执行效率最快，性能最好同时根据官网文档，配置源码后-map打包方式，项目打包速度会变慢，因为打包过程中会建立映射关系，比较消耗性能。因此，我们需要区分开发环境和线上环境：在开发者模式（开发）：如果要使用sourceMap，建议使用cheap-module-eval-source-map的形式，这样更在提示错误方面比较全面，同时打包也比较快。在生产者模式（production）下：使用cheap-module-source-map快速定位问题。同时sourceMap也可以通过nginx设置只打开.map文件到白名单。13、什么是模块热更新，如何配置模块热更新？模块热更新是webpack的一个功能。修改代码后无需刷新浏览器即可更新代码。它是自动刷新浏览器的高级版本，可以在应用过程中更换、添加和删除模块，而无需重新加载整个页面。优点是只更新更改，节省宝贵的开发时间。调整样式要快得多，几乎等同于在浏览器中更改样式。开启Webpack热更新需要使用webpack.HotModuleReplacementPlugin()，devServer开启热更新。比如实现热更新，只更新指定的js模块。if(module.hot){module.hot.accept('./library.js',function(){//对更新后的库模块做点什么...});}热更新示意图如图以下。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。对于长缓存，可以在输出中指定输出文件的chunkhash，将频繁更新的代码和框架代码分开，使用NameModulesPlugin或HashedModulesPlugin保持重新打包后的文件名不变。参考：webpack4配置浏览器长缓存16、polyfill和runtime有什么区别babel-polyfill的原理是当运行环境中有些方法没有实现时，babel-polyfill会兼容。babel-runtime将es6编译成es5执行。通常，我们使用es6语法编写应用程序，最终会通过babel-runtime编译成es5。也就是说，不管浏览器是否支持ES6，只要是ES6语法，都会被转码成ES5，因此会产生大量冗余代码。babel-polyfill是通过在全局对象和内置对象的原型中添加方法来实现的。例如Array.prototype.find方法在运行环境中是不支持的。通过引入polyfill，我们可以使用es6的方式来编写，但是缺点是会造成全局空间污染。babel-runtime不会污染全局对象和内置对象的原型。比如我们需要Promise，只需要从'babel-runtime/core-js/promise'导入Promise，这样不仅可以避免污染全局对象，还可以减少不必要的代码。
