面试常问的webpack知识点

最新推荐文章于 2023-02-12 08:22:30 发布
最新推荐文章于 2023-02-12 08:22:30 发布
阅读量145 收藏
点赞数
分类专栏： webpack 文章标签： 面试 javascript node.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44051639/article/details/120453046
版权

  • 什么是webpack

    • webpack是一个JavaScript静态模块打包工具
    • webpack里面一切文件皆是模块,通过loader转换文件,通过plugin注入钩子
    • 最终输出有多个模块组合的文件,webpack专注构建模块化项目
    • webpack可以看做模块打包机:所做的事情
      • 分析你的项目结构
      • 找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言(scss,TS)
      • 将其打包为合适的格式以供浏览器使用

  • webpack的优点

    • 专注于处理模块化的项目, 能做到开箱即用,一步到位
    • 通过plugin扩展,完整好用又不失灵活
    • 通过loader扩展,可以让webpack把所有类型的文件都解析打包
    • 区域庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展
    • 使用场景不局限与web开发
    • 提供了更好的开发体验

  • webpack的构建流程是什么? (从读取配置到输出文件这个过程开始)

    • webpack的运行流程是一个串行的过程, 从启动到结束回依次执行以下流程
      • 初始化参数, 从配置文件读取与合并参数 , 得到最终参数
      • 开始编译 , 用上一步得到的参数初始化compiler对象,加载所有配置的插件,开始执行编译
      • 确定入口 , 根据配置中的entry找到所有的入口文件
      • 编译模块 , 从入口文件触发,调用所有的loader对模块进行翻译,再找出该模块依赖的模块,在递归本步骤直到所有的入口依赖的文件都经过本步骤处理
      • 完成模块编译 在经过上一步所有的loader翻译所有模块后,得到每个模块被翻译后的最终内容以及它们之间的依赖关系
      • 输出资源 根据入口和模块之间的依赖关系,组装成一个一个包含多个模块的chunk,再把每个chunk转换成一个单独的文件加入到输出列表
    • 在以上过程中,webpack会在特定的时间点广播出特点的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用webpack提供的API改变webpack的运行结果

  • 常见的loader(加载器)

    • file-loader 把文件输出到一个文件夹中,在代码中通过相对URL去引入输出的文件
    • URL-loader 和file-loader类似,但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去
    • source-map-loader 加载额外的source map 文件 , 以方便断点调试
    • image-loader 加载并且压缩图片文件
    • babel-loader 把ES6转换为ES5
    • css-loader 加载css , 支持模块化 压缩 ,文件导入等特性
    • style-loader 把css代码注入到JavaScript中,通过DOM操作去加载css
    • eslint-loader 通过ESlint检查Javascript代码

  • Loader(加载器)和Plugin(钩子,插件)的区别

    • 作用不同
      • loader直译为"加载器",webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader.所以loader的作用是让webpack拥有了加载和解析非JavaScript的能力.
      • Plugin直译为"插件",也叫做钩子,Plugin可以扩展webpack的功能, 让webpack具有更多的灵活性. 在webpack运行的生命周期中会广播出许多事件, plugin可以监听这些事将,在合适的时机通过webpack提供的API改变输出结果
    • 用法不同
      • Loader在module.rules中配置,也就是说他作为模块的解析规则而存在,类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件,使用什么加载和使用的参数
      • Plugin在plugins中单独配置,类型为数组,每一项是一个plugin的实例,参数都通过构造函数传入
我叫张永宽@
关注
专栏目录
面试常问 webpack 面试题
weixin_59907064的博客
09-07 471
通过二十多道面试题整理了一下关于webpack中不容易理解的问题
webpack (常问高薪面试题11道)（20220401）
weixin_59519449的博客
04-01 7442
1、什么是 webpack（必会） 1、基本定义 wbpack 是一个打包模块化 javascript 的工具，在 webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件，webpack 专注构 建模块化项目，webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将 其打包为合适的格式
vue-webpack 面试
Henry_ID的博客
07-08 502
面试题 1、什么是webpack（必会） ​ webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目 2、Webpack的优点是什么？（必会） 专注于处理模块化的项目，能做到开箱即用，一步到位 通过plugin扩展，完整好用又不失灵活 通过loaders扩展, 可以让webpack把所有类型的文件都解析打包 区庞大活跃，经常引入紧跟时代发展的新特性，能为
面试官：你了解Webpack吗？
weixin_34289744的博客
04-13 396
前言 大家好哟，这是第四篇面试官篇，估计还有个七八十篇面试文章（前端苦命）。 这篇文章介绍了webpack核心概念以及如何使用。 开始吧！ 概念 webpack的核心概念只要记住下面四个就够用了（除非大佬是webpack配置工程师）。 入口 出口 loader 插件 入口 module.exports = { entry: './src', //单入口 // or...
面试官常问 webpack 面试题
weixin_59519449的博客
04-06 1万+
目录 第一题：谈谈你对webpack的理解？ 第二题：说说webpack与grunt、gulp的不同？ 第三题：什么是bundle,什么是chunk，什么是module?bundle： 第四题：什么是Loader?什么是Plugin? 第五题：有哪些常见的Loader？他们是解决什么问题的？ 第一题：谈谈你对webpack的理解？ webpack是一个打包模块化js的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文
Webpack面试知识点总结
Hello，this is cirzear
12-06 250
webpack是什么，解释一下 webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML、CSS、JavaScript和静态文件（图片。字体）等，让开发更高效。对于不同的类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。 webpack的基本功能和工作原理 ...
前端面试总结--webpack
学习笔记
09-06 321
webpack是什么 webpack是一个现代的JavaScript应用的静态模块打包工具。 webpack安装 全局安装 npm install webpack -g 局部安装 // 开发时依赖 npm install babel-loader --save-dev // 运行时依赖 npm install babel-loader --save webpack使用 package.json的scripts中定义自己的执行脚本 然后执行 npm run build（会先在node_modules/.
android面试刷题，那些年Android面试官常问的知识点
m0_68629662的博客
03-27 1680
背景 首先我是个菜鸡，工资也低的一笔。 刚毕业时候在一家国企上班干 app 开发，干了快两年的时候，跳槽到了一家伪大厂干安全。投了不少简历都没有回音，只有这加伪大厂要我就来了。当时说好了会接触一些底层的东西，然而平时也就写 python 脚本，逆向，android 上写了一些风控的东西，感觉有点 low，工资也不高，当初没敢多要，hr 给的比我要的还高。刚刚 leader 谈了谈明年的规划，现在想跳槽。 现在也是很尴尬，原来 app 开发的东西也忘了不少，然后其实我想干 framework 开发，自己对 a
关于 vue 的知识点和面试高频问到
09-07
在面试中，Vue 的相关知识点是考察开发者技能的重要部分。以下是对标题和描述中涉及的Vue知识点的详细说明： 1. **Vue 特性** - **轻量级**：Vue.js 库的体积小，不依赖其他基础库，这使得它在网页加载速度上有...
前端webpack 高薪企业必备面试真题16道 ---带答案(9)（20220415)
weixin_59519449的博客
04-15 2457
目录 1、什么是 webpack（必会） 2、webpack 的优点是什么？（必会） 3、webpack 的构建流程是什么?从读取配置到输出文件这 个过程尽量说全（必会） 4、webpack 与 grunt、gulp 的不同？（必会） 1、三者之间的区别 2、构建思路的区别 3、 从知识背景区别 5、有哪些常见的 Loader？他们是解决什么问题的？（必会） 6、Loader 和 Plugin 的不同？（必会） 1、不同的作用 2、不同的用法 7、webpack3 和 webpack
手写webpack核心原理，再也不怕面试官问我webpack原理
weixin_43964148的博客
07-25 765
手写webpack核心原理 文章目录手写webpack核心原理一、核心打包原理1.1 打包的主要流程如下1.2 具体细节二、基本准备工作三、获取模块内容四、分析模块五、收集依赖六、ES6转成ES5（AST）七、递归获取所有依赖八、处理两个关键字 一、核心打包原理 1.1 打包的主要流程如下 需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 根据AST语法树，生成浏览器能够运行的代码 1.2 具体细节 获取主模块内容 分析模块 安装@babel/pars
面试官：讲一讲webpack？
最新发布
UangIng的博客
02-12 530
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。以上的三点是重中之重，怎么也得理解后说清楚，内容也刚好能说2分钟左右，不多不少再往下追问的就靠日常使用记忆以及进阶的，webpack的配置其实大多时候就是建立项目的时候用，很多都需要去查去看才能做，一般情况下不会再往下追问的。---------------------来自灵题库流程+作者小改解释，结合webpack四大核心来记忆，还是可以大概背下来的。（Compiler==编译器）
【知识总结】十个面试官九个会问到的webpack问题都汇总到这一篇啦
椰卤工程师的个人博客
09-17 354
webpack 的常用插件 html-webpack-plugin： 将一个页面模版打包到dist目录下，默认都是自动引入js 和 css const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './index.html', // 以咱们本地的index.html文件为基
面试官：说说你对Webpack的理解？解决了什么问题？
weixin_44475093的博客
04-26 1229
一、背景Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源模块化最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自...
面试总结:webpack原理
mrhuanhuan的博客
10-01 1万+
当面试官问你webpack原理的时候，你可以从以下二个方面回答: 1.webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖的文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件 2.以下是webpack.config.js的配置 //webpack的配置文件 由于webpack是基于Node构建的，web...
GCC编译器背后的故事
weixin_51087836的博客
10-15 329
文章目录一、关于可执行程序如何被组装二、静态库.a的生成和使用1、编译所需的3个.c文件2、生成.o目标文件3、生成.a 静态库文件4、使用.a 库文件，创建可执行程序5、记录文件大小三、 动态库.so的生成和使用1、生成.o目标文件2、生成.so 动态库文件3、使用.so 库文件，创建可执行程序4、记录文件大小 一、关于可执行程序如何被组装 二、静态库.a的生成和使用 1、编译所需的3个.c文件 （1）创建一个作业目录，用于保存本次文件。 （2）用 vim、nano 或 gedit 等文本编辑器编辑生成
webpack面试题汇总
热门推荐
大灰狼的小绵羊哥哥的博客
11-21 3万+
原文https://mp.weixin.qq.com/s/SrKGoSG6mfHCQqk3Ol6eOw 这是webpack系列文章的十一篇，整理了一些关于webpack的面试题，对之前的内容做一次总结 webpack官网https://webpack.js.org/ webpack中文网https://www.webpackjs.com/ 什么是webpack webpack是一个打包模块化...
前端面试之webpack面试常见问题
weixin_34392435的博客
04-03 1417
概念问题一：什么是webpack和grunt和gulp有什么不同 答案：Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。 概念问题二：什么是bundle,什么是chunk，什么是module? 答案：bundle是由webpack打包出来...
当年校招时，我就死在这个问题上...
技术杂谈
10-25 2万+
GitChat 作者：幻海之巅 前端必不可少的脚手架对于打包工具的熟悉程度渐渐的也已经成为衡量前端开发工程师水平的一个重要指标。记得在校招面试的时候就有问各种打包工具的问题，如对于gulp,grunt,webpack的熟悉程度，各种打包工具的特点以及优缺点等
20个常问Vue面试题资源整理
5. Vue.js的路由管理：使用Vue Router进行单页面应用的路由管理是面试中常问的问题，包括路由的懒加载、动态路由匹配等。 6. Vue.js的状态管理：理解和掌握Vuex的原理和使用方法，如何在组件间共享状态和数据。 7....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值