webpack面试

什么是webpack和grunt和gulp有什么不同?

webpack是一个模块打包器,他可以递归的打包项目中的所有模块,最终生成几个打包后的文件。它和其他工具最大的不同在于它支持code-splitting(代码分割)、模块化(AMD,ESM,CommonJS)开发、全局分析(他会分析整个项目下跟你应用有关的模块)。

什么是bundle,chunk,module?

bundle是由webpack打包出来的最终文件。chunk是webpack进行模块的依赖分析时候,代码分割出来的代码块。module是开发中的单个模块。

什么是loader、plugin?

loaders是用来告诉webpack如何转化处理某一类型的文件,并且引入到打包出的文件中。plugin是用来自定义打包过程的方式,一个插件一定含有apply方法,通过这个方法参与到整个打包流程。

如何自动生成webpack配置?

webpack-cli、vue-cli

webpack-dev-server和http服务器如nginx有什么区别?

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

模块热更新?

它是webpack的一个功能,可以使得代码修改过后不用刷新浏览器就可以更新,是高级版的自动刷新浏览器。

什么是长缓存?

浏览器在用户访问页面时候,为了加快访问速度,都会对用户访问的静态资源进行储存,但每一次代码升级和更新,都需要浏览区去下载新的代码,最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output给文件指定chunkhash,并且分离经常更新的代码和框架代码,通过namedModulesPlugin再次使打包文件名不变。

什么是tree-shaking? css可以tree-shaking吗?

指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js treeshaking通过UglifyJsPlugin来进行,css中通过purify-CSS来进行.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 11,766评论 0 16
  • 前端将大型项目分成一个个单独的模块,一般封装好的每个模块都会实现一个目的明确的完成的功能。如何处理这些模块以及模块...
    pixels阅读 8,700评论 1 14
  • 编译es6: 基础:babel-loader --save-dev babel-core --save-dev;要...
    LoveBugs_King阅读 6,955评论 0 1
  • localStorage是Html5新加入的特性,这个特性主要用来做浏览器本地存储 一、判断浏览器是否支持loca...
    陈川Lethe阅读 2,713评论 0 0
  • 1.从本篇文章中学到最重要的概念:多多与父母联系,多多交谈。 2.本篇文章中怦然心动的单词: dest...
    231李国芳阅读 1,150评论 2 1