标签: Webpack

【前端面试题】有关前端工程化的面试题(附答案)

随着前端技术的发展,前端工程化变得越来越重要。前端工程化部分的面试题主要考察应试者对工程化的理解与运用,如何通过工程化来提高代码质量、编译代码、优化代码;如何提高网站性能,保障网站安全,提升用户体验;如何将开发的代码按照理想的方式发布和上线等。

当然,一些新技术的实现(诸如 EMAScript 6、 typescript、jsx、 Less、Sass、 Stylus等)都离不开前端工程化。

1、谈谈你对 WebPack的认识。

WebPack是一个模块打包工具,可以使用 WebPack管理模块依赖,并编译输岀模块所需的静态文件。它能够很好地管理与打包Web开发中所用到的HTML、 JavaScript 、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源, WebPack有对应的模块加载器。Web Pack模块打包器会分析模块间的依赖关系,*后生成优化且合并后的静态资源。

WebPack的两大特色如下。

(1)代码切割( code splitting)

(2) loader可以处理各种类型的静态文件,并且支持串行操作WebPack以 CommonJS规范来书写代码,但对 AMD/CMD的支持也很全面,方便对项目进行代码迁移。

WebPack具有 require.js和 browserify的功能,但也有很多自己的新特性,

(1)对 CommonJS、AMD、ES6的语法实现了兼容。

(2)对 JavaScript、CSS、图片等资源文件都支持打包

(3)串联式模块加载器和插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、 EMAScript 6的支持

(4)有独立的配置文件 webpack.config. js。

(5)可以将代码切割成不同的块,实现按需加载,缩短了初始化时间。

(6)支持 SourceUrls和 SourceMaps,易于调试。

(7)具有强大的 Plugin接口,大多是内部插件,使用起来比较灵活

(8)使用异步I/O,并具有多级缓存,这使得 WebPack速度很快且在增量编译上更加快。

2、在使用 WebPack时,你都做些什么?

用来压缩合并CSS和 JavaScript代码,压缩图片,对小图生成base64编码,对大图进行压缩,使用 Babel把 EMAScript 6编译成 EMAScript 5,热重载,局部刷新等。在 output中配置出口文件,在 entry中配置入口文件。

使用各种 loader对各种资源做处理,并解析成浏览器可运行的代码。

3、你用Gulp都实现了哪些功能?

我之前写的一个 Angular项目就是使用Gulp构建的。使用task制定各种任务,将通过 bower安装的第三方插件复制到开发和生产目录中。复制Less并将它编译成CSS然后合并到一个文件中并压缩。

将JS目录下所有的 JavaScript文件合并并压缩成一个JavaScript文件。使用 imagemin压缩图片,使图片变小。

使用open让项目在自动运行时自动打开浏览器。使用 watch监听src目录中代码的变化,并进行实时编译。使用 connect创建一个项目服务器,用来做开发调试。

4、说说 WabPack打包的流程。

具体流程如下。

(1)通过 entry配置入口文件。

(2)通过 output指定输出的文件。

(3)使用各种 loader处理CSS、 JavaScript、 image等资源,并将它们编译与打包成浏览器可以解析的内容等。

5、什么是 WebPack?

Web Pack是一个打包工具, WebPack可以将项目中使用的脚本开发语言CoffeeScript Type Script、样式开发语言Less或者Sass“编译”成浏览器能识别的 JavaScript和CSS文件。

6、WebPack的核心原理是什么?

核心原理如下。

(1)一切皆模块。

正如 JavaScript文件可以是一个“模块”( module)一样,其他的(如CSS、 image或 HTML)文件也可视作模块。因此,可以执行 require(’myJSfile js’),亦可以执行require( ‘myCSSfile.css’)。这意味着我们可以将事务(业务)分割成更小的、易于管理的片段,从而达到重复利用的目的。

(2)按需加载。

传统的模块打包工具( module bundler)*终将所有的模块编译并生成一个庞大的bundle. js文件。但是,在真实的App里, bundle. js文件的大小在10MB到15MB之间,这可能会导致应用一直处于加载状态。因此, WebPack使用许多特性来分割代码,然后生成多个 bundle js文件,而且异步加载部分代码用于实现按需加载。

7、WebPack中 loader的作用是什么?

具体作用如下。

(1)实现对不同格式文件的处理,比如将Scss转换为CSS,或将 TypeScript转化为Javascript。

(2)可以编译文件,从而使其能够添加到依赖关系中。loader是 WebPack*重要的部分之一。通过使用不同的 loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理。loader需要在 webpack.config.js里单独用 module进行配置。

8、说说你工作中几个常用的 loader。

常用的 loader如下:

babel- loader:将下一代的 JavaScript语法规范转换成现代浏览器能够攴持的语法规范。因为 babel有些复杂,所以大多数开发者都会新建一个. babelrc进行配置。

css-loader、 style- loader:这两个建议配合使用,用来解析CSS文件依赖。

less- loader:解析less文件。

file- loader:生成的文件名就是文件内容的MD5散列值,并会保留所引用资源的原始扩展名。

url- loader:功能类似于file-loader,但是当文件大小低于指定的限制时,可以返回一个 DataURL。

9、plugins和 loader有什么区别?

它们是两个完全不同的东西。loader负责处理源文件,如CSS、jsx文件,一次处理一个文件。而 plugins并不直接操作单个文件,它直接对整个构建过程起作用。

10、说说 HtmlWebpackPlugin插件的作用。

依据一个简单的 index .html模板,生成一个自动引用你打包后的 JavaScript文件的、新的 index.html文件。

11、说说 WebPack支持的脚本模块规范。

不同项目在定义脚本模块时使用的规范不同。有的项目会使用 Commonjs规范(参考 Node. js);有的项目会使用 EMAScript 6模块规范;有的还会使用AMD规范(参考 Require. js)。WebPack支持这3种规范,还支持混合使用。

12、如何为项目创建 package. json文件?

将命令行切换至根目录下,运行 npm init,命令行就会一步一步引导你建立package. json文件。手动在根目录下创建一个空文件,并命名为 package. json,在文件中填充JSON格式的常规内容。例如初期只需要name和 version字段。

  1. {
  2. “name”“Project”
  3. “version”” 0.0.1″
  4. }

13、WebPack和 gulp/grunt相比有什么特性?

gulp/ grunt是一种能够优化前端的流程开发工具,而 Web Pack是一种模块化的解决方案,由于 WebPack提供的功能越来越丰富,使得 WebPack可以代替 gulp/grunt类的工具。

14、grunt和gulp的工作方式是什么?

在一个配置文件中,指明对某些文件进行何种编译、组合、压缩等任务的具体步骤,当运行这些工具的指令的时候,就可以自动完成这些任务。

15、WebPack的工作方式是什么?

把项目当作一个整体,通过一个给定的主文件(如 index. js), WebPack将从这个文件开始找到你项目的所有依赖,并使用 loader(加载器)来处理它们,*后打包为个浏览器可识别的 JavaScript文件。

16、Babe通过编译能达到什么目的?

能达到以下目的。

(1)使用下一代的 JavaScript标准( EMAScript 6、 EMAScript 7)语法,当前的浏览器尚不完全支持这些标准。

(2)使用基于 JavaScript进行拓展的语言,比如 React的jsx语法。

17、EventSource和 websocket的区别是什么?

区别如下。

EventSource本质仍然是HTTP,仅提供服务器端到浏览器端的单向文本传输,不需要心跳链接,链接断开会持续重发链接。

注意:心跳链接是用来检测一个系统是否存活或者网络链路是否通畅的一种方式。

(2) websocket是基于TCP的协议,提供双向数据传输,支持二进制,需要心跳链接,断开链接时不会重链。

(3) EventSource更简洁轻量, websocket支持性更妤,后者功能更强大一点。

18、在工作中, WebPack工具中常用到的插件有哪些?

常用到的插件如下

(1) HtmlWebpackPlugin:依据一个HTML模板,生成HTML文件,并将打包后的资源文件自动引入。

(2) commonsChunkPlugin:抽取公共模块,减小包占用的内存空间,例如vue的源码、 jQuery的源码等。

(3) css-loader:解析CSS文件依赖,在 JavaScript中通过 require方式引入CSS文件。

(4) style- loader.:通过 style标签引入CSS。

(5) extract-text-webpack- plugin:将样式抽取成单独的文件。

(6)url- loader:实现图片文字等资源的打包,limit选项定义大小限制,如果小于该限制,则打包成base64编码格式;如果大于该限制,就使用file- loader去打包成图片。

(7) hostess:实现浏览器兼容。

(8) babel:将 JavaScript未来版本( EMAScript6、 EMAScript2016等)转换成当前浏览器支持的版本。

(9) hot module replacement:修改代码后,自动刷新、实时预览修改后的效果

(10) ugliifyJsPlugin:压缩 JavaScript代码。

19、WebPack与gulp的区别是什么?

区别如下。

(1)用途不同。gulp是工具链,可以配合各种插件使用,例如对 JavaScript、CSS文件进行压缩,对less进行编译等;而 WebPack能把项目中的各种 JavaScript、CSS文件等打包合并成一个或者多个文件,主要用于模块化开发。

(2)侧重点不同。gulp侧重于整个过程的控制管理(像是流水线),通过配置不同的任务,构建整个前端开发流程,并且gulp的打包功能是通过安装gulp-webpack来实现的;WebPack则侧重于模块打包。

(3) WebPack能够按照模块的依赖关系构建文件组织结构。

20、window对象中,模块间的依赖关系完全由文件的加载顺序决定,这样的模块组织方式出现的弊端是什么?

弊端如下。

(1)全局作用域下容易造成变量冲突。

(2)文件只能按照< script>的书写顺序进行加载

(3)开发人员需要自己解决模块代码库的依赖关系。

(4)在大型项目中这样的加载方式会导致文件冗长而难以管理。

21、如何用 webpack-dev- server监控文件编译?

打开多个控制台,用 webpack–watch实时监控文件变动,并随时编译。

22、如何修改 webpack-dev- server的端口?

用–port修改端口号,如 webpack-dev-server–port888。

23、publicPath是什么?

在 WebPack自动生成资源路径时,比如由于 WebPack异步加载分包而需要独立出来的块,或者打包CSS时, WebPack自动替换掉的图片、字体文件,又或者使用html-webpack-plugin后 WebPack自动加载的入口文件等,这些 WebPack生成的路径都会参考 publicPath参数。不需要关注CDN,需要关注的是,文件发布出来后,应该部署到哪里。如果文件是与页面放到一起的,那么可以按相对路径来设置,比如’./’之类的;而如果 JavaScript、CSS文件用于存放CDN,当然就要填写CDN的域名和路径。

24、export、 export default和 module.export的区别是什么?

export、 export default都属于 EMAScript 6 模块化开发规范。

export和 export default的区别如下。

在同一个文件里面可以有多个 export,一个文件里面只能有1个 export default。

使用 import引入的方式也有点区别。

在使用 export时,用 import引入的相应模块名字一定要和定义的名字一样;而在使用 export default时,用 import引入的模块名字可以不一样。

module. export属于 CommonJS语法规范。

25、当使用Babel直接打包的 JavaScript文件中含有jsx语法的时候会报错,如何解决这个问题?

修改 package. json并添加 react,如以下代码所示。

  1. “babel”:{
  2. “presets”:[
  3. “es2015”,
  4. “react”,
  5. “stage-o”
  6. ],
  7. “plugins” :[
  8. “add-module-exports”
  9. ]
  10. }

26、当使用html- webpack- plugin时找不到指定的 template文件怎么办?

通过以下代码进行解决。

  1. {
  2. test:/ \.html ?$/,
  3. loader : ‘html-loader ‘
  4. }

也就是将以前的file-loader修改为html- loader就可以了。

27、WebPack如何切换开发环境和生产环境?

生产环境与开发环境的区别无非就是调用的接口地址、资源存放路径、线上的资源是否需要压缩等方面。目前的做法是通过在 package. json中设置node的一个全局变量,然后在 webpack. config. js文件里面进行生产环境与开发环境的配置切换。

28、WebPack的特点是什么?

特点如下:

(1)具有丰富的插件,方便程序员进行开发。

(2)具有大量的加载器,包括加载各种静态资源。

(3)支持代码分割,提供按需加载的能力。

(4)它是一个理想的发布工具。

29、WebPack的优势是什么?

优势如下:

(1) WebPack以 CommonJS的形式书写脚本,对 AMD/CMD的支持也很全面,方便对旧项目进行代码迁移

(2)*大部分前端资源都可以模块化。

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

(4)扩展性强,插件机制完善,特别是支持 React热插拔功能。

30、图片处理常见的加载器有几种?

有以下几种。

(1)file- loader,默认情况下会根据图片生成对应的MD5散列的文件格式。

(2)url- loader,它类似于file- loader,但是url- loader可以根据自身文件的大小,来决定是否把转化为base64格式的 DataUrl单独作为文件,也可以自定义对应的散列文件名。

(3) image- webpack- loader,提供压缩图片的功能。

31、WebPack命令的– config选项有什么作用?

— config用来指定一个配置文件,代替命令行中的选项,从而简化命令。如果直接执行 WebPack, WebPack会在当前目录下查找名为 webpack. config. js的文件。

本文完〜

前端面试题之前端工程化篇

一、Git

1. git 和 svn 的区别
git 和 svn *大的区别在于 git 是分布式的,而 svn 是集中式的。因此我们不能再离线的情况下使用 svn。如果服务器出现问题,就没有办法使用 svn 来提交代码。
svn 中的分支是整个版本库的复制的一份完整目录,而 git 的分支是指针指向某次提交,因此 git 的分支创建更加开销更小并且分支上的变化不会影响到其他人。svn 的分支变化会影响到所有的人。
svn 的指令相对于 git 来说要简单一些,比 git 更容易上手。
**GIT把内容按元数据方式存储,而SVN是按文件:**因为git目录是处于个人机器上的一个克隆版的版本库,它拥有中心版本库上所有的东西,例如标签,分支,版本记录等。
**GIT分支和SVN的分支不同:**svn会发生分支遗漏的情况,而git可以同一个工作目录下快速的在几个分支间切换,很容易发现未被合并的分支,简单而快捷的合并这些文件。
GIT没有一个全局的版本号,而SVN有
**GIT的内容完整性要优于SVN:**GIT的内容存储使用的是SHA-1哈希算法。这能确保代码内容的完整性,确保在遇到磁盘故障和网络问题时降低对版本库的破坏

2. 经常使用的 git 命令?
git init // 新建 git 代码库
git add // 添加指定文件到暂存区
git rm // 删除工作区文件,并且将这次删除放入暂存区
git commit -m [message] // 提交暂存区到仓库区
git branch // 列出所有分支
git checkout -b [branch] // 新建一个分支,并切换到该分支
git status // 显示有变更文件的状态

3. git pull 和 git fetch 的区别

git fetch 只是将远程仓库的变化下载下来,并没有和本地分支合并。
git pull 会将远程仓库的变化下载下来,并和当前分支合并。
4. git rebase 和 git merge 的区别
git merge 和 git rebase 都是用于分支合并,关键在 commit 记录的处理上不同:

git merge 会新建一个新的 commit 对象,然后两个分支以前的 commit 记录都指向这个新 commit 记录。这种方法会保留之前每个分支的 commit 历史。
git rebase 会先找到两个分支的*个共同的 commit 祖先记录,然后将提取当前分支这之后的所有 commit 记录,然后将这个 commit 记录添加到目标分支的*新提交后面。经过这个合并后,两个分支合并后的 commit 记录就变为了线性的记录了。
二、Webpack

1. webpack与grunt、gulp的不同?
Grunt**、Gulp是基于任务运⾏的⼯具**: 它们会⾃动执⾏指定的任务,就像流⽔线,把资源放上去然后通过不同插件进⾏加⼯,它们包含活跃的社区,丰富的插件,能⽅便的打造各种⼯作流。

Webpack是基于模块化打包的⼯具: ⾃动化处理模块,webpack把⼀切当成模块,当 webpack 处理应⽤程序时,它会递归地构建⼀个依赖关系图 (dependency graph),其中包含应⽤程序需要的每个模块,然后将所有这些模块打包成⼀个或多个 bundle。

因此这是完全不同的两类⼯具,⽽现在主流的⽅式是⽤npm script代替Grunt、Gulp,npm script同样可以打造任务流。

 

2. webpack、rollup、parcel优劣?

webpack适⽤于⼤型复杂的前端站点构建: webpack有强⼤的loader和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数,这个⽴即执⾏函数接收⼀个参数,这个参数是模块对象,键为各个模块的路径,值为模块内容。⽴即执⾏函数内部则处理模块之间的引⽤,执⾏模块等,这种情况更适合⽂件依赖复杂的应⽤开发。
rollup适⽤于基础库的打包,如vue、d3等: Rollup 就是将各个模块打包进⼀个⽂件中,并且通过 Tree-shaking 来删除⽆⽤的代码,可以*⼤程度上降低代码体积,但是rollup没有webpack如此多的的如代码分割、按需加载等⾼级功能,其更聚焦于库的打包,因此更适合库的开发。
parcel适⽤于简单的实验性项⽬: 他可以满⾜低⻔槛的快速看到效果,但是⽣态差、报错信息不够全⾯都是他的硬伤,除了⼀些玩具项⽬或者实验项⽬不建议使⽤。

3. 有哪些常⻅的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 代码
注意:在Webpack中,loader的执行顺序是从右向左执行的。因为webpack选择了compose这样的函数式编程方式,这种方式的表达式执行是从右向左的。

4. 有哪些常⻅的Plugin?
define-plugin:定义环境变量
html-webpack-plugin:简化html⽂件创建
uglifyjs-webpack-plugin:通过 UglifyES 压缩 ES6 代码
webpack-parallel-uglify-plugin: 多核压缩,提⾼压缩速度
webpack-bundle-analyzer: 可视化webpack输出⽂件的体积
mini-css-extract-plugin: CSS提取到单独的⽂件中,⽀持按需加载

5. bundle,chunk,module是什么?
bundle:是由webpack打包出来的⽂件;
chunk:代码块,⼀个chunk由多个模块组合⽽成,⽤于代码的合并和分割;
module:是开发中的单个模块,在webpack的世界,⼀切皆模块,⼀个模块对应⼀个⽂件,webpack会从配置的 entry中递归开始找出所有依赖的模块。

6. 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 的实例,参数都通过构造函数传⼊。
7. webpack的构建流程**?**
Webpack 的运⾏流程是⼀个串⾏的过程,从启动到结束会依次执⾏以下流程:

初始化参数:从配置⽂件和 Shell 语句中读取与合并参数,得出*终的参数;
开始编译:⽤上⼀步得到的参数初始化 Compiler 对象,加载所有配置的插件,执⾏对象的 run ⽅法开始执⾏编译;
确定⼊⼝:根据配置中的 entry 找出所有的⼊⼝⽂件;
编译模块:从⼊⼝⽂件出发,调⽤所有配置的 Loader 对模块进⾏翻译,再找出该模块依赖的模块,再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理;
完成模块编译:在经过第4步使⽤ Loader 翻译完所有模块后,得到了每个模块被翻译后的*终内容以及它们之间的依赖关系;
输出资源:根据⼊⼝和模块之间的依赖关系,组装成⼀个个包含多个模块的 Chunk,再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表,这步是可以修改输出内容的*后机会;
输出完成:在确定好输出内容后,根据配置确定输出的路径和⽂件名,把⽂件内容写⼊到⽂件系统。
在以上过程中,Webpack 会在特定的时间点⼴播出特定的事件,插件在监听到感兴趣的事件后会执⾏特定的逻辑,并且插件可以调⽤ Webpack 提供的 API 改变 Webpack 的运⾏结果。

8. 编写loader或plugin的思路?
Loader像⼀个”翻译官”把读到的源⽂件内容转义成新的⽂件内容,并且每个Loader通过链式操作,将源⽂件⼀步步翻译成想要的样⼦。

编写Loader时要遵循单⼀原则,每个Loader只做⼀种”转义”⼯作。 每个Loader的拿到的是源⽂件内容(source),可以通过返回值的⽅式将处理后的内容输出,也可以调⽤ this.callback() ⽅法,将内容返回给webpack。 还可以通过this.async() ⽣成⼀个 callback 函数,再⽤这个callback将处理后的内容输出出去。 此外 webpack 还为开发者准备了开发loader的⼯具函数集——loader-utils 。

相对于Loader⽽⾔,Plugin的编写就灵活了许多。 webpack在运⾏的⽣命周期中会⼴播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。

9. webpack的热更新是如何做到的?说明其原理?
webpack的热更新⼜称热替换(Hot Module Replacement),缩写为HMR。 这个机制可以做到不⽤刷新浏览器⽽将新变更的模块替换掉旧的模块。

原理:

%title插图%num

⾸先要知道server端和client端都做了处理⼯作:

第⼀步,在 webpack 的 watch 模式下,⽂件系统中某⼀个⽂件发⽣修改,webpack 监听到⽂件变化,根据配置⽂
件对模块重新编译打包,并将打包后的代码通过简单的 JavaScript 对象保存在内存中。

第⼆步是 webpack-dev-server 和 webpack 之间的接⼝交互,⽽在这⼀步,主要是 dev-server 的中间件 webpack- dev-middleware 和 webpack 之间的交互,webpack-dev-middleware 调⽤ webpack 暴露的 API对代码变化进⾏监 控,并且告诉 webpack,将代码打包到内存中。
第三步是 webpack-dev-server 对⽂件变化的⼀个监控,这⼀步不同于第⼀步,并不是监控代码变化重新打包。当我们在配置⽂件中配置了devServer.watchContentBase 为 true 的时候,Server 会监听这些配置⽂件夹中静态⽂件的变化,变化后会通知浏览器端对应⽤进⾏ live reload。注意,这⼉是浏览器刷新,和 HMR 是两个概念。
第四步也是 webpack-dev-server 代码的⼯作,该步骤主要是通过 sockjs(webpack-dev-server 的依赖)在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接,将 webpack 编译打包的各个阶段的状态信息告知浏览器端,同时也包括第三步中 Server 监听静态⽂件变化的信息。浏览器端根据这些 socket 消息进⾏不同的操作。当然服务端传递的*主要信息还是新模块的 hash 值,后⾯的步骤根据这⼀ hash 值来进⾏模块热替换。
webpack-dev-server/client 端并不能够请求更新的代码,也不会执⾏热更模块操作,⽽把这些⼯作⼜交回给了webpack,webpack/hot/dev-server 的⼯作就是根据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进⾏模块热更新。当然如果仅仅是刷新浏览器,也就没有后⾯那些步骤了。
HotModuleReplacement.runtime 是客户端 HMR 的中枢,它接收到上⼀步传递给他的新模块的 hash 值,它通过JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求,服务端返回⼀个 json,该 json 包含了所有要更新的模块的 hash 值,获取到更新列表后,该模块再次通过 jsonp 请求,获取到*新的模块代码。这就是上图中 7、8、9 步骤。
⽽第 10 步是决定 HMR 成功与否的关键步骤,在该步骤中,HotModulePlugin 将会对新旧模块进⾏对⽐,决定是否更新模块,在决定更新模块后,检查模块之间的依赖关系,更新模块的同时更新模块间的依赖引⽤。
*后⼀步,当 HMR 失败后,回退到 live reload 操作,也就是进⾏浏览器刷新来获取*新打包代码。
10. 如何⽤webpack来优化前端性能?
⽤webpack优化前端性能是指优化webpack的输出结果,让打包的*终结果在浏览器运⾏快速⾼效。

压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件, 利⽤ cssnano (css-loader?minimize)来压缩css
利⽤CDN加速: 在构建过程中,将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 –optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
11. 如何提⾼webpack的打包速度**?**
happypack: 利⽤进程并⾏编译loader,利⽤缓存来使得 rebuild 更快,遗憾的是作者表示已经不会继续开发此项⽬,类似的替代者是thread-loader
外部扩展(externals): 将不怎么需要更新的第三⽅库脱离webpack打包,不被打⼊bundle中,从⽽减少打包时间,⽐如jQuery⽤script标签引⼊
dll: 采⽤webpack的 DllPlugin 和 DllReferencePlugin 引⼊dll,让⼀些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间
利⽤缓存: webpack.cache 、babel-loader.cacheDirectory、 HappyPack.cache 都可以利⽤缓存提⾼rebuild效率缩⼩⽂件搜索范围: ⽐如babel-loader插件,如果你的⽂件仅存在于src中,那么可以 include: path.resolve(__dirname,‘src’) ,当然*⼤多数情况下这种操作的提升有限,除⾮不⼩⼼build了node_modules⽂件
12. 如何提⾼webpack的构建速度?
多⼊⼝情况下,使⽤ CommonsChunkPlugin 来提取公共代码
通过 externals 配置来提取常⽤库
利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是*对不会修改的npm包来进⾏预编译,再通过 DllReferencePlugin 将预编译的模块加载进来。
使⽤ Happypack 实现多线程加速编译
使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
13. 怎么配置单⻚应⽤?怎么配置多⻚应⽤?
单⻚应⽤可以理解为webpack的标准模式,直接在 entry 中指定单⻚应⽤的⼊⼝即可,这⾥不再赘述多⻚应⽤的话,可以使⽤webpack的 AutoWebPlugin 来完成简单⾃动化的构建,但是前提是项⽬的⽬录结构必须遵守他预设的规范。 多⻚应⽤中要注意的是:

每个⻚⾯都有公共的代码,可以将这些代码抽离出来,避免重复的加载。⽐如,每个⻚⾯都引⽤了同⼀套css样式表
随着业务的不断扩展,⻚⾯可能会不断的追加,所以⼀定要让⼊⼝的配置⾜够灵活,避免每次添加新⻚⾯还需要修改构建配置
三、其他
1. Babel的原理是什么**?**
babel 的转译过程也分为三个阶段,这三步具体是:

解析 Parse: 将代码解析⽣成抽象语法树(AST),即词法分析与语法分析的过程;
转换 Transform: 对于 AST 进⾏变换⼀系列的操作,babel 接受得到 AST 并通过 babel-traverse 对其进⾏遍历,在此过程中进⾏添加、更新及移除等操作;
⽣成 Generate: 将变换后的 AST 再转换为 JS 代码, 使⽤到的模块是 babel-generator。

%title插图%num

友情链接: SITEMAP | 旋风加速器官网 | 旋风软件中心 | textarea | 黑洞加速器 | jiaohess | 老王加速器 | 烧饼哥加速器 | 小蓝鸟 | tiktok加速器 | 旋风加速度器 | 旋风加速 | quickq加速器 | 飞驰加速器 | 飞鸟加速器 | 狗急加速器 | hammer加速器 | trafficace | 原子加速器 | 葫芦加速器 | 麦旋风 | 油管加速器 | anycastly | INS加速器 | INS加速器免费版 | 免费vqn加速外网 | 旋风加速器 | 快橙加速器 | 啊哈加速器 | 迷雾通 | 优途加速器 | 海外播 | 坚果加速器 | 海外vqn加速 | 蘑菇加速器 | 毛豆加速器 | 接码平台 | 接码S | 西柚加速器 | 快柠檬加速器 | 黑洞加速 | falemon | 快橙加速器 | anycast加速器 | ibaidu | moneytreeblog | 坚果加速器 | 派币加速器 | 飞鸟加速器 | 毛豆APP | PIKPAK | 安卓vqn免费 | 一元机场加速器 | 一元机场 | 老王加速器 | 黑洞加速器 | 白石山 | 小牛加速器 | 黑洞加速 | 迷雾通官网 | 迷雾通 | 迷雾通加速器 | 十大免费加速神器 | 猎豹加速器 | 蚂蚁加速器 | 坚果加速器 | 黑洞加速 | 银河加速器 | 猎豹加速器 | 海鸥加速器 | 芒果加速器 | 小牛加速器 | 极光加速器 | 黑洞加速 | movabletype中文网 | 猎豹加速器官网 | 烧饼哥加速器官网 | 旋风加速器度器 | 哔咔漫画 | PicACG | 雷霆加速