webpack一面基础面试题

深碍√TFBOYSˉ_ 2022-11-25 00:55 185阅读 0赞

## 前端为何要进行打包和构建? ##

> `代码层面`
> 
> 1.  体积更小 (Tree-shaking, 压缩, 合并) , 加载更快
> 2.  编译高级语言或语法 (ES6+, 模块化, TS, scss)
> 3.  兼容性和错误检查 (Polyfill, postcss, eslint)

> `研发流程层面`
> 
> 1.  统一高效的开发环境
> 2.  统一的构建流程和产出标准
> 3.  集成公司构建规范(提测, 上线等)

--------------------

## module chunk bundle的区别? ##

1.  module是各个源码文件, webpack中一切皆模块
2.  chunk是多模块合并成的, 在内存中还未产出的代码块, 比如entry import() splitChunk里都可以定义chunk
3.  bundle是最终产出的文件, 每个chunk打包完后都产出bundle文件

--------------------

## loader和plugin的区别? ##

loader模块转换器, 如less转换成css  
plugin扩展插件, 如HtmlWebpackPlugin

--------------------

## babel和webpack的区别? ##

babel 是 js新语法编译工具, 不关心模块化  
webpack是 打包构建工具, 是多个 loader plugin的集合

--------------------

## 如何产出一个lib (第三方模块)? ##

output.library  
![产出lib][lib]

--------------------

## babel-polyfill和babel-runtime的区别? ##

babel-polyfill会污染全局  
babel-runtime不会  
产出第三方lib要用babel-runtime

--------------------

## webpack如何实现懒加载? ##

import()  
结合Vue 和 React 异步组件  
结合Vue-router React-router异步加载路由

--------------------

## 为何Proxy不能被polyfill? ##

可以被polyfill的:

> class可以用 function 模拟  
> Promise可以用 callback 来模拟  
> 但Proxy的功能用 Object.defineProperty 无法模拟

--------------------

## webpack优化构建速度 (可用于生产环境)? ##

优化babel-plugin  
IngorePlugin  
noParse  
happypack  
ParalleUglifyPlugin

--------------------

## webpack优化构建速度 (不用于生产环境)? ##

自动更新  
热更新  
DllPlugin

--------------------

## webpack优化产出代码? ##

小图片base64编码  
bundle加hash  
懒加载  
提取公共代码  
使用CDN  
IgnorePlugin  
使用production  
Scope Hosting

--------------------

## Babel入门配置 ##

[Babel入门配置][Babel]

--------------------

## Webpack入门配置 ##

[Webpack入门配置][Webpack]

[lib]: /images/20221124/fe34cf33dab7417d996acb7b3e955d93.png
[Babel]: https://blog.csdn.net/m0_48446542/article/details/107851388
[Webpack]: https://blog.csdn.net/m0_48446542/article/details/107840379

发表评论取消回复

表情：

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

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

相关阅读

相关一面阿里云C++面试题汇总

1、如何初始化一个指针数组。解析：首先明确一个概念，就是指向数组的指针，和存放指针的数组。指向数组的指针：char (\array)\[5\];含义是一个指向存放5个字符

古城微笑少年丶/ 2023年10月06日 09:54/ 0 赞/ 56 阅读

相关 java 面试真题一面

> 本题适合一到三年 Java 开发，以下问题都是按照原面试官提问记录文章目录我要进大厂系列面试题一面 1. redis五种基本数

柔情只为你懂/ 2023年10月05日 13:44/ 0 赞/ 84 阅读

相关 2020前端面试(一面面试题）

2020前端面试(一面面试题） [][Link 1] CSS方面 calc, support, media各自的含义及用法？ @support主要是用于检

逃离我推掉我的手/ 2023年02月27日 10:44/ 0 赞/ 26 阅读

相关 2020webpack的面试题(webpack)

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

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

相关阿里一面面试题整理集合

文章目录数据结构算法题 Java 基础 Java 高级三大框架数据库

古城微笑少年丶/ 2022年12月10日 08:42/ 0 赞/ 262 阅读

相关 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 阅读

相关 webpack面试题

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

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

相关 webpack的面试题总结

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

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