Day01_webpack
01_webpack_为何学
我们为什么要学习webpack?
- 减少文件数量
- 缩减代码体积
- 提高浏览器打开的速度
02_webpack_基本概述
什么是webpack?作用是?目的是?
- 它是一个Node的第三方模块
- 作用是识别代码,翻译,压缩,整合打包
- 提高打开网站的速度
03_webpack_使用前_准备工作
使用webpack需要做哪些准备工作?
- 初始化包环境,得到package.json文件
- 下载webpack等模块
- 在package.json自定义命令,为打包做准备
04_webpack_基本使用_打包2个js文件
webpack如何使用呢?
- 默认src/index.js - 打包入口文件
- 需要引入到入口的文件才会参与打包
- 执行package.json里的build命令,间接执行webpack打包命令
- 默认输出dist/main.js的打包结果
05_webpack_更新打包_重新打包
代码增加后,如何打包呢?
- 确保在src/index.js引入和使用
- 重新执行yarn build打包命令
06_webpack_修改默认入口和出口
如何修改webpack入口和出口?
- 新建webpack.config.js(webpack默认配置文件名)
- 通过entry设置入口文件路径
- 通过output对象设置出口路径和文件名
07_webpack_打包流程
- 一句话总结下yarn build后干了什么?
- 执行webpack命令,找到配置文件,入口和依赖关系,打包代码输出到指定位置
- 所有想要被打包的文件应该怎样处理?
- 所有要被打包的资源都要跟入口产生直接或间接的引用关系
08_webpack案例_隔行变色
用yarn下的包,如何作用在前端项目中?
- 借助webpack,把模块和代码打包
- 把js文件引入到html执行查看效果
09_webpack插件_自动生成html文件
如何让webpack打包时自动生成html文件呢?
- 依赖html-webpack-plugin插件,yarn下载此插件
- 在webpack.config.js配置文件写入即可
10_webpack_打包css文件问题
为什么webpack打包css文件会报错呢?
- 因为webpack默认只能处理js文件
11_webpack加载器_打包css文件
webpack如何支持css打包?打包后样式在哪里?如何生效?
- 依赖css-loader和style-loader
- css代码被打包进js文件中
- style-loader会把css代码插入到head下style标签内
12_webpack加载器_打包less文件
webpack如何支持less打包?需要注意什么?
- 依赖less-loader和less模块包
- 转换css后还需要css-loader和style-loader的处理
13_webpack处理图片_配置asset
webpack如何支持图片打包?对图片有哪两种处理方案?
- webpack5,在rules里,针对图片文件设置type: asset
- 小于8KB转base64字符串进js里,大于8KB输出文件
14_webpack处理图片_优点和缺点
图片转base64打包进js中的好处和坏处?
- 好处是减少浏览器发送的请求次数,读取图片速度快
- 坏处是图片过大,转base64占空间会多30%左右
15_webpack处理字体图标文件
webpack如何处理图标字体文件?
- 在webpack.config.js的rules里针对字体图标文件类型设置asset/resource,直接输出到dist下
16_webpack加载器_babel降级js语法
webpack如何帮助我们降低js版本语法?
- 借助babel-loader和babel编译器,给webpack配置上
17_webpack_开发服务器概述
为什么要使用webpack开发服务器呢?
- 打包在内存中,速度快
- 自动更新打包变化的代码,实时返回给浏览器显示
18_webpack_开发服务器_基础使用
如何使用webpack开发服务器实时打包我们的代码呢?
- 确保下载了webpack-dev-server这个包
- 在package.json配置自定义命令,然后启动即可
- webpack-dev-server会给我们一个地址+端口浏览器访问即可看到在内存中打包的index.html页面
19_webpack_开发服务器_相关配置
如何修改webpack开发服务器的配置呢?
- 去文档查找配置项的名字
- 在webpack.config.js的devServer选项里添加
面试题
1、什么是webpack(必会)
webpack是一个打包模块化javascript的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注构建模块化项目
2、Webpack的优点是什么?(必会)
- 专注于处理模块化的项目,能做到开箱即用,一步到位
- 通过plugin扩展,完整好用又不失灵活
- 通过loaders扩展, 可以让webpack把所有类型的文件都解析打包
- 区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展
3、webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全(必会)
Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
- 初始化参数:从配置文件读取与合并参数,得出最终的参数
- 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,开始执行编译
- 确定入口:根据配置中的 entry 找出所有的入口文件
- 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
- 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
- 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果
4、说一下 Webpack 的热更新原理(必会)
-
webpack 的热更新又称热替换(Hot Module Replacement),缩写为 HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
-
HMR的核心就是客户端从服务端拉去更新后的文件,准确的说是 chunk diff (chunk 需要更新的部分),实际上 WDS 与浏览器之间维护了一个 Websocket,当本地资源发生变化时,WDS 会向浏览器推送更新,并带上构建时的 hash,让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash),这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。
-
后续的部分(拿到增量更新之后如何处理?哪些状态该保留?哪些又需要更新?)由 HotModulePlugin 来完成,提供了相关 API 以供开发者针对自身场景进行处理,像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
5、webpack与grunt、gulp的不同?(必会)
1) 三者之间的区别
三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用gulp来处理,比如单独打包CSS文件等。
grunt和gulp是基于任务和流(Task、Stream)的。类似jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个web的构建流程。
webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件,然后用不同的Loader来处理不同的文件,用Plugin来扩展webpack功能。
2) 从构建思路来说
gulp和grunt需要开发者将整个前端构建过程拆分成多个Task,并合理控制所有Task的调用关系 webpack需要开发者找到入口,并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工
3) 对于知识背景来说
gulp更像后端开发者的思路,需要对于整个流程了如指掌 webpack更倾向于前端开发者的思路
6、有哪些常见的Loader?他们是解决什么问题的?(必会)
1、 file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件
2、 url-loader:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
3、 source-map-loader:加载额外的 Source Map 文件,以方便断点调试
4、 image-loader:加载并且压缩图片文件
5、 babel-loader:把 ES6 转换成 ES5
6、 css-loader:加载 CSS,支持模块化、压缩、文件导入等特性
7、 style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。
8、 eslint-loader:通过 ESLint 检查 JavaScript 代码
7、Loader和Plugin的不同?(必会)
1) 不同的作用
Loader直译为"加载器"。Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
2) 不同的用法
Loader在module.rules中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件(test),使用什么加载(loader)和使用的参数(options)
Plugin在plugins中单独配置。 类型为数组,每一项是一个plugin的实例,参数都通过构造函数传入。
Day02_Vue脚手架_基础API
01_vue_为什么学
我们为什么学习Vue?
- 开发更快速,更高效
- 企业开发都在使用
- 前端工程师必备技能,高薪
02_vue_是什么
- Vue是什么?
- Vue是一个JavaScript渐进式框架
- 什么是渐进式?
- 渐进式就是按需逐渐集成功能
- 什么是库和框架?
- 库是方法的集合,而框架是一套拥有自己规则的语法
03_vue_开发方式_学习方法
- 我们在哪里书写Vue的代码?
- 在工程化环境下用Vue开发项目
- 我们如何才能学好Vue?
- 多练多用多总结
04_vue_脚手架环境介绍
- 用Vue开发项目,需要自己配置webpack?
- 不需要,Vue官方提供了@vue/cli包,可以快速搭建项目基本开发环境
- 使用脚手架的好处是什么?
- 零配置,开箱即用,基于它快速搭建项目基本开发环境
05_vue_安装全局包
- 如何安装全局包?
- yarn global add 包名 或 npm i -g 包名
- 我们会得到什么?
- 全局包会在计算机中配置全局命令(例:nodemon、vue命令)
06_vue_创建脚手架项目_启动
- 如何创建一个开箱即用的脚手架项目?
- vue create 项目名
- 如何在网页上浏览这个项目?
- yarn serve 启动本地热更新开发服务器
07_vue_脚手架文件说明
脚手架里主要文件和作用?
- node_modules - 都是下载的包
- public/index.html - 浏览器运行的网页
- src/main.js - webpack打包的入口
- src/App.vue - Vue页面入口
- package.json - 项目描述文件
08_vue_主要的3个文件和关系
main.js和App.vue以及index.html作用和关系?
- main.js - 项目打包入口 - Vue初始化
- App.vue - Vue页面入口
- index.html - 浏览器运行的文件
- App.vue => main.js => index.html
09_vue_开发服务器_自定义配置
脚手架项目配置文件是什么?
- 项目根目录下的vue.config.js配置文件
10_vue_eslint简介_暂时关闭设置
- eslint是什么?
- eslint是代码检查工具,违反规定就报错
- 如何暂时关闭?
- 在vue.config.js中设置lintOnSave为false重启服务器即可
11_vue_单vue文件开发方式介绍
- 单vue文件的好处?
- 独立作用域,不再担心变量重名问题
- 单vue文件使用注意事项?
- template里只能有一个根标签
12_vue_清空脚手架欢迎界面
欢迎界面是哪些?如何清除?
- assets下图片和components下的文件,App.vue初始代码
- 删除即可,但是要留下Vue项目入口页面App.vue文件
14_vue基础语法_插值表达式
- 什么是插值表达式?
- 双大括号,可以把Vue变量直接显示在标签内
- Vue中变量声明在哪里?
- data函数返回的对象上的键值对
15_vue基础语法_MVVM设计模式
- 什么是设计模式?
- 设计模式是对代码分层,引入一种架构的概念
- MVVM是什么?
- MVVM(模型,视图,视图模型双向关联的一种设计模式)
- MVVM好处?
- 减少DOM操作,提高开发效率