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