webpack面试题

客官°小女子只卖身不卖艺 2022-04-22 13:10 229阅读 0赞

## 了解webpack吗 ##

webpack是一个模块打包工具，使用webpack管理你的模块依赖，并编译输出她们所需要的静态文件，它能够很好地管理、打包web开发中所用到的html、css、js及各种静态文件，让开发过程更加高效。

## webpack优点 ##

代码分割和模块处理

## 什么是bundle,什么是chunk，什么是module? ##

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

## 什么是Loader?什么是Plugin? ##

1）Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中  
2）Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。

## 如何可以自动生成webpack配置？ ##

webpack-cli /vue-cli /etc …脚手架工具

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

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

## **什么是模块热更新？** ##

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

## **什么是长缓存？在webpack中如何做到长缓存优化？** ##

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

## **什么是Tree-shaking?CSS可以Tree-shaking吗** ##

Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking  
JS。Css需要使用Purify-CSS。

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 2020年webpack面试题

webpack面试题 webpack 谈谈你对webpack的看法 webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态

Bertha 。/ 2023年02月10日 05:19/ 0 赞/ 174 阅读

相关 2020webpack的面试题(webpack)

关于webpack的面试题总结为什么要总结webpack相关的面试题随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如re

Bertha 。/ 2023年02月10日 05:18/ 0 赞/ 17 阅读

相关 webpack一面基础面试题

前端为何要进行打包和构建? > `代码层面` > > 1. 体积更小 (Tree-shaking, 压缩, 合并) , 加载更快 > 2. 编译高级语言或语法 (E

深碍√TFBOYSˉ_/ 2022年11月25日 00:55/ 0 赞/ 186 阅读

相关 Webpack面试题

> 面试题希沃ENOW大前端 > > 公司官网：CVTE(广州视源股份) > > 团队：CVTE旗下未来教育希沃软件平台中心enow团队本文作者： ![b5c922f

柔情只为你懂/ 2022年11月14日 11:47/ 0 赞/ 193 阅读

相关 2021 最新 webpack 面试题

webpack打包原理将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载什么是webpack，与gulp,grunt有什么区别

男娘i/ 2022年10月12日 05:28/ 0 赞/ 361 阅读

相关 2021webpack面试题及答案

本文转自于前端面试总结@知乎专栏：https://zhuanlan.zhihu.com/p/44438844 关于webpack的面试题随着现代前端开发

﹏ヽ暗。殇╰゛Y/ 2022年10月06日 05:55/ 0 赞/ 301 阅读

相关 28道Webpack面试题及答案

![c1c7c02e854e5f96e69b49787079f135.png][] 1、webpack的作用是什么，谈谈你对它的理解？现在的前端网页功能丰富，特

淡淡的烟草味﹌/ 2022年09月01日 15:43/ 0 赞/ 337 阅读

相关 webpack面试题

了解webpack吗 webpack是一个模块打包工具，使用webpack管理你的模块依赖，并编译输出她们所需要的静态文件，它能够很好地管理、打包web开发中所用到的ht

客官°小女子只卖身不卖艺/ 2022年04月22日 13:10/ 0 赞/ 230 阅读

相关面试题:webpack之性能优化

移除插件某些包，减少插件体积 > 比如说通用的日期库是moment.js，这个库会占用很大的体积，因为当引用这个库的时候，所有的locale文件都被引入，而这些文件甚至在

柔光的暖阳◎/ 2022年01月17日 22:11/ 0 赞/ 608 阅读

相关 webpack的面试题总结

本文转自于前端面试总结@知乎专栏：[https://zhuanlan.zhihu.com/p/44438844][https_zhuanlan.zhihu.com_p_4443

本是古典何须时尚/ 2021年11月23日 04:38/ 0 赞/ 270 阅读