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处理的事情(如代码压缩,合并,编译以及浏览器实时更       新等)。然后定义这些执行顺序,来让gulp执行这些task,从而构建项目的整个流程。自动化构建工具并不能把所有的模块打包到一起,也不能构建不同模块之间的     依赖关系。

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

   Webpack-cli

7:什么是模块更新?有什么优点?

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

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

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

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

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

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

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

  10:什么是Tree-sharking?

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

参考链接:https://www.jianshu.com/p/b17bf7b818ce

原文地址:https://www.cnblogs.com/pengxiangchong/p/11678011.html