webpack
文章平均质量分 62
本分栏专注于前端面试常见的webpack面试题
叫我阿东就行
前端的那块砖
展开
-
webpack常用的插件
Plugin 的特点是一个独立的模块模块对外暴露一个 js 函数函数的原型上定义了一个注入compiler对象的apply方法apply函数中需要有通过compiler对象挂载的webpack事件钩子,钩子的回调中能拿到当前编译的对象,如果是异步编译插件的话可以拿到回调callback完成自定义子编译流程并处理complition对象的内部数据如果异步编译插件的话,数据处理完成后执行callback回调。原创 2024-04-03 11:45:35 · 620 阅读 · 0 评论 -
10.webpack 减少代码体积
如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。是一个术语,通常用于描述移除 JavaScript 中的没有使用上的代码。开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。Babel 为编译的每个文件都插入了辅助代码,使代码体积过大!默认情况下会被添加到每一个需要它的文件中。这样将整个库都打包进来,体积就太大了。我们可以对图片进行压缩,减少图片体积。并且使所有辅助代码从这里引用。原创 2024-03-14 12:22:39 · 349 阅读 · 0 评论 -
9.webpack提高打包构建速度
开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。用法此时 css 样式经过 style-loader 处理,已经具备 HMR 功能了。但是 js 还不行。上面这样写会很麻烦,所以实际开发我们会使用其他 loader 来解决。。原创 2024-03-14 12:11:12 · 812 阅读 · 0 评论 -
8.webpack Loader的原理
帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。原创 2024-03-14 11:32:27 · 797 阅读 · 0 评论 -
7.webpack对css文件优化
Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式这样对于网站来说,会出现闪屏现象,用户体验不好我们应该是单独的 Css 文件,通过 link 标签加载性能才好2.配置webpack.config.js。原创 2024-03-14 10:41:49 · 355 阅读 · 0 评论 -
6.webpack处理js资源
Webpack,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。我们先完成 Eslint,检测代码格式无误后,在由 Babel 做代码兼容性处理。原创 2024-03-14 10:32:32 · 808 阅读 · 0 评论 -
5.webpack对图片资源进行优化
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源。原创 2024-03-14 10:15:05 · 330 阅读 · 0 评论 -
4.webpack五大核心概念(基础配置)
指示 Webpack 从哪个文件开始打包指示 Webpack 打包完的文件输出到哪里去,如何命名等webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析扩展 Webpack 的功能采用common.js模块化规范。原创 2024-03-14 10:08:06 · 448 阅读 · 0 评论 -
3.webpack proxy工作原理
即webpack提供的代理服务器基本行为就是接受客户端发送的请求后转发给其他服务器其目的是为了方便开发者在开发模式下解决跨域问题。原创 2024-03-12 20:16:48 · 375 阅读 · 0 评论 -
2.webpack的构建流程
从Entry发出,针对每个Module串行调用对应的Loader去翻译文件内容,再找到该Moudule的依赖,递归进行编译处理。:从配置文件和Shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数。:对编译后的Module组合成Chunk,把Chunk转换成文件,输出到文件系统。原创 2024-03-12 20:08:34 · 355 阅读 · 0 评论 -
1.webpack热更新及原理
HMR全程Hot Module Replacement,可以理解为模块热替换,是指在应用程序运行过程中,替换、添加、删除模块,而无需刷新整个应用。原创 2024-03-12 19:58:41 · 321 阅读 · 0 评论