2023年7月18日发(作者：)

学习笔记vue学习链接: .初步学习1、vue 基础1.1 vue 简介1、javascript框架2、简化DOM操作3、响应式数据驱动1.2 第⼀个vue程序1、导⼊开发版本的；2、创建Vue实例对象，设置el属性和data属性；3、使⽤简介的模板语法把数据渲染到页⾯上；1.3 el 挂载点el 挂载点：el是⽤来设置Vue实例挂载（管理）的元素；Vue实例的作⽤范围是什么呢？Vue会管理el选项命中的元素及其内部的后代元素；是否可以使⽤其他的选择器？可以使⽤其他的选择器，但是建议使⽤ID选择器；是否可以设置其他的dom元素呢？可以使⽤其他的双标签，不能使⽤HTML和body1.4 data：数据对象Vue中⽤到的数据定义在data中；data中可以写复杂类型的数据；渲染复杂类型数据时，遵守js的语法即可；2、本地应⽤通过Vue实现常见的⽹页效果；学习Vue指令，以案例巩固知识点；Vue指令指的是，以v-开头的⼀组特殊语法；2.1 v-text指令v-text指令的作⽤是：设置标签的⽂本值（textContent）；默认写法会替换全部内容，使⽤差值表达式{{}}可以替换指定内容；2.2 v-html指令v-html指令的作⽤是：设置元素的innerHTML；内容中有html结构会被解析为标签；v-text指令⽆论内容是什么，只会解析为⽂本；2.3 v-on指令基础v-on指令的作⽤是为元素绑定事件；事件名不需要写on;指令可以简写为@；绑定的⽅法定义在methods属性中；v-on补充：事件绑定的⽅法写成函数调⽤的形式，可以传⼊⾃定义参数；定义⽅法时需要定义形参来接收传⼊的参数；事件的后⾯跟上.修饰符可以对事件进⾏限制；.enter 可以限制触发的按键为回车；2.4 本地应⽤-计数器案例总结：创建vue实例时，el(挂载点)，data（数据），methods（⽅法）；v-on指令的作⽤是绑定事件，简写为@；⽅法中通过this关键字获取data中的数据；v-text指令的作⽤是设置元素的⽂本值，简写为{{}}；v-html指令的作⽤是：设置元素的innerHTML;2.5 v-show指令v-show指令的作⽤是：根据真假切换元素的显⽰状态；原理是修改元素的display，实现显⽰隐藏；指令后⾯的内容，最终都会解析为布尔值；值为true元素显⽰，值为false元素隐藏；2.6 v-if指令v-if指令的作⽤是：根据表达式的真假切换元素的显⽰状态；本质是通过操纵dom元素来切换显⽰状态；表达式的值为true，元素存在与dom树中，为false，从dom树中移除；频繁的切换v-show，或者v-if,v-show的切换消耗⼩；2.7 v-bind指令v-bind指令的作⽤是：为元素绑定属性；完整写法是：v-bind:属性名；简写的话可以直接省略v-bind，只保留：属性名；需要动态的增删class建议使⽤对象的⽅式；v-bind2.8 案例-图⽚切换案例总结：列表数据使⽤数组保存；v-bind指令可以设置元素属性，⽐如src;v-show和v-if都可以切换元素的显⽰状态，频繁切换⽤v-show;2.9 v-forv-for 指令的作⽤是：根据数据⽣成列表结构；数组经常和v-for结合使⽤；语法是（item,index）in 数据；2.10 v-modelv-model指令的作⽤是便捷的设置和获取表单元素的值；绑定的数据会和表单元素值相关联；绑定的数据和表单元素的值双向绑定；3、⽹络应⽤Vue结合⽹络数据开发应⽤；3.1 axios 功能强⼤的⽹络请求库axios内部是Ajax，封装之后使⽤更加⽅便；1、axios必须先导⼊才可以使⽤；2、使⽤get或post⽅法即可发送对应的请求；3、then⽅法中的回调函数会在请求成功或失败时触发；4、通过回调函数的形参可以获取响应内容或错误信息；axios默认是没有jsonp 跨域请求的⽅法的。⼀般来说流⾏的做法是将跨域放在后台来解决，也就是后台开发⼈员添加跨域头信息。 3.2 axios + vueaxios如何结合vue开发⽹络应⽤；axios回调函数中的this已经改变，⽆法访问到data中的数据；把this保存起来，回调函数中直接使⽤保存的this即可；和本地应⽤的区别就是改变了数据来源；

3.3 案例-天知道4、综合应⽤进⼀步学习Day011、什么是是⽬前最⽕的⼀个前端框架，React是最流⾏的⼀个前端框架（React除了开发⽹站，还可以开发⼿机APP，Vue语法也是可以⽤于⼿机APP开发的，需要借助于Weex）;是前端主流框架之⼀，和、⼀起，并称为前端三⼤主流框架；是⼀套构建⽤户界⾯的框架，只关注视图层，它不仅易于上⼿，还便于与第三⽅库或既有项⽬整合（Vue有配套的第三⽅类库，可以整合起来做⼤型项⽬的开发）；前端的主要⼯作？主要负责MVC中的V这⼀层；主要⼯作就是和界⾯打交道；2、为什么要学习流⾏框架？企业为了提⾼开发效率，在企业中， 时间就是效率，在企业中，使⽤框架，能够提⾼开发的效率；提⾼开发效率的发展历程：原⽣JS——>jQuery之类的类库——>前端模板引擎——>/（能够帮助我们减少不必要的DOM操作；提⾼渲染效率；双向数据绑定的概念（通过框架提供的指令，前端程序员只需要关系数据的业务逻辑，不再关⼼DOM是如何渲染的了））3、框架和库的区别框架：是⼀套完整的解决⽅案；对项⽬的侵⼊性较⼤，项⽬如果需要更换框架，则需要重新架构整个项⽬；库（插件）：提供某⼀个⼩功能，对项⽬的侵⼊性较⼩，如果某个库⽆法完成某些需求，可以很容易切换到其他库实现需求；4、MVC的MVVM的关系图解MVC是后端分层开发概念；MVVM是前端视图层的概念，主要关注与视图层分离，也就是说：MVVM把前端的视图层，分为了三部分：Model、View、VMViewModel5、基本代码和MVM之间的对应关系 6、v-cloak使⽤v-clock能够解决插值表达式闪烁的问题；

插值表达式 和 v-text的区别：默认v-text是没有闪烁的；v-text会覆盖元素中原本的内容，但是插值表达式，只会替换⾃⼰的这个占位符，不会把整个元素的内容清空；v-html:会覆盖所有内容，但是会把html元素解析出来；Day021、过滤器允许你⾃定义过滤器，可被⽤作⼀些常见的⽂本格式化，过滤器可以⽤在两个地⽅：mustache插值和v:bind表达式。过滤器应该被添加在Javascript表达式的尾部，由“管道”符指⽰；过滤器的定义语法：("过滤器的名称",function(){});过滤器中的function，第⼀个参数已经被规定死了，永远都是过滤器管道符前⾯传递过来的数据；//

定义⼀个Vue

全局的过滤器，名字叫做msgFormat ("msgFormat", function (msg) { //

字符串 replace

⽅法，第⼀个参数，除了可写⼀个字符串之外，还可以定义⼀个正则， g表⽰全局 return e(/淡/g, "块"); }) let app = new Vue({ el:"#app", data:{ msg:"淡出的" } })1.1 全局过滤器：所谓全局过滤器，就是所有的Vue实例都共享的；1.2 私有过滤器（局部）过滤器调⽤的时候是采⽤就近原则，如果私有和全局名称⼀致，优先私有；2、字符串padStart⽅法的使⽤使⽤ES6 中的字符串新⽅法rt(maxLength,fillString="")或(maxLength,fillString="")3、⾃定义按键修饰符 es.f2 = 113;4、指令-⾃定义全局指令让⽂本框获取焦点使⽤ive()定义全局的指令；其中：参数1：指令的名称，注意，在定义的时候，指令的名称前⾯，不需要加v-前缀；但是在调⽤的时候，必须在指令名称前⾯加上v-前缀来调⽤；参数2：是⼀个对象，这个对象⾝上，有⼀些指令相关的函数，这些函数可以在特定的阶段，执⾏相关的操作；ive("focus", { //

每当指令绑定到元素上的时候，会⽴即执⾏这个bind函数，只执⾏⼀次 /*注意：在每个函数中，第⼀个参数永远是el，表⽰被绑定了的那个元素，这个el元素，是⼀个原⽣的JS对象 *

在元素

刚绑定的时候，还没有插⼊到DOM中去，这时候，调⽤focus⽅法没有作⽤ *

因为，⼀个元素，只有插⼊DOM之后，才能获取焦点*/ bind:function (el) { // (); }, // inserted表⽰元素插⼊到DOM中的时候，会执⾏inserted

函数【执⾏1次】 inserted:function (el) { (); }, //

当更新的时候，会执⾏updated,可能会触发多次 updated: function (el) { } })样式⼀般可以在bind中写，事件⼀般写在inserted中，防⽌事件不⽣效5、指令-使⽤钩⼦函数的第⼆个binding参数拿到传递的值 //注意blue的写法ive("color",{ bind: function (el, binding) { = ; }, inserted: function (el) { }, updated: function (el) { } })6、指令-定义私有指令7、指令-指令函数的简写形式8、⽣命周期函数（重要）什么是⽣命周期：从Vue实例创建、运⾏、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为⽣命周期；⽣命周期钩⼦：就是⽣命周期事件的别名⽽已；⽣命周期钩⼦ = ⽣命周期函数 =⽣命周期事件；9、vue-resource发起get、post、jsonp请求4、JSONP的实现原理：由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端⼝不同的数据接⼝，浏览器认为这种访问不安全；可以通过动态创建script标签的形式，把script标签的src属性，指向数据接⼝的地址，因为script标签不存在跨域限制，这种数据获取⽅式，称为JSONP（注意：根据JSONP的实现原理，知晓JSONP只⽀持Get请求）；具体实现过程：先在客户端定义⼀个回调⽅法，预定义对数据的操作；再把这个回调⽅法的名称，通过URL传参的形式，提交到服务器的数据接⼝；服务器数据接⼝组织好要发送给客户端的数据，再拿着客户端传递过来的回调⽅法，拼接出⼀个调⽤这个⽅法的字符串，发送给客户端去解析；客户端拿到服务器返回的字符串之后，当做script脚本去解析执⾏，这样就能够拿到JSONP的数据了；Day031、从数据库获取列表

= function (){ let app = new Vue({ el:"#app", data:{ catalog:"", list:[{id:1,catalog:"宝马"}], time:new Date() }, created() { t(); }, methods: { add: function () { ("引⼊了") }, //

获取所有书籍列表 getList:function () { this.$("/goodbook/catalog?key=39fbb88bcdaed972802ff9544929549e") .then(function (result){ = ; // (); },function (error) { (error); }) } }, filters:{ timeFormat:function (dataStr){ // (dataStr); let date = new Date(dataStr); let y = lYear(); let M = (th() + 1).toString().padStart(2,"0"); let d = e().toString().padStart(2,"0"); let H = rs().toString().padStart(2,"0"); let m = utes().toString().padStart(2,"0"); let s = onds().toString().padStart(2,"0"); return `${y}-${M}-${d} ${H}:${m}:${s}` } } })}2、全局配置数据接⼝的根域名如果我们通过全局配置了，请求的数据接⼝ 根域名，则在每次单独发起http请求的时候 请求的url路径，应该以相对路径开头，前⾯不能带"/"，否则，不会启⽤根路径做拼接 = '/';// 获取所有书籍列表 getList:function () { this.$("goodbook/catalog?key=39fbb88bcdaed972802ff9544929549e") .then(function (result){ = ; // (); },function (error) { (error); }) }3、全局配置emulateJSON选项eJSON=true;4、Vue中的动画4.1 动画-使⽤过渡类名实现动画（第⼀种实现动画的⽅式）

4.2 动画-⾃定义v-前缀4.3 动画-使⽤第三⽅类库实现动画（第⼆种实现动画的⽅式）4.4 动画-钩⼦函数实现半场动画（第三种实现动画的⽅式） click="flag=!flag"> methods:{ // beforeEnter

表⽰动画⼊场之前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式 beforeEnter:function (el) { ("1") //

设置⼩球开始动画之前的起始位置 orm = "translate(0,0)"; }, enter:function (el,done) { ("2") /*这句话没有实际作⽤，但是如果不写，出不来动画效果； *

可以认为Height会强制动画刷新*/ Height; // enter

表⽰动画开始之后的样式，这⾥，可以设置⼩球完成动画之后的结束状态 orm = "translate(150px,450px)"; tion = "all 1s ease"; done(); }, afterEnter:function (el) { //

动画完成之后，会调⽤afterEnter ("3") = !; } }

4.5 动画-使⽤transition-group元素实现列表动画

• {{}}--{{}}

key="" click="del(index)">这样写就会把transition-group渲染为span标签；4.5.1 动画-实现列表删除和删除时候的动画效果key="" click="del(index)">click="add">4.5.2 动画-transition-group 中appear和tag属性的作⽤给transition-group添加appear属性，实现页⾯刚展⽰出来的时候⼊场时候的效果；通过transition-group元素设置tag属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签；5、Vue组件5.1 什么是组件组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调⽤对应的组件即可；5.2 模块化和组件化的区别模块化：是从代码逻辑的⾓度进⾏划分的；⽅便代码分层开发，保证每个功能模块的职能单⼀；组件化：是从UI界⾯的⾓度进⾏划分的；前端的组件化，⽅便UI组件的重⽤；5.3 组件-创建组件的⽅式11、 使⽤来创建全局的Vue组件2、使⽤ent(‘组件的名称’,创建出来的组件模板对象)；注意：如果使⽤ent定义全局组件的时候，组件名称使⽤了驼峰命名，则在引⽤组件的时候，需要把⼤写的驼峰改为⼩写的字母，同时，两个单词之间⽤“-”连接；如果不使⽤驼峰，则直接拿名称来使⽤即可；写到⼀起：ent 第⼀个参数：组件的名称，将来在引⽤组件的时候，就是⼀个标签形式来引⼊它的；第⼆个参数：创建的组件，其中，template就是组件将来要展⽰的HTML内容； ent('myCom1', ({ template: '

这是使⽤创建的组件

' }));5.4 组件-创建组件的⽅式2注意：不论是哪种⽅式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯⼀⼀个根元素5.5 组件-创建组件的⽅式3在被控制的#app外⾯使⽤template元素，定义组件的HTML模板结构5.6 组件-使⽤components定义私有组件5.7 组件-组件中的data1、 组件可以有⾃⼰的data数据2、组件的data和实例的data有点不⼀样，实例中的data可以为⼀个对象，但是组件中的data必须是⼀个⽅法3、组件中的data除了必须为⼀个⽅法外，这个⽅法内部，还必须返回⼀个对象才⾏；4、组件中的data数据，使⽤⽅式和实例中的data使⽤⽅式完全⼀样；5.8 组件-为什么组件的data必须是⼀个function互不影响；5.9 组件切换 -使⽤v-if 和v-else结合flag进⾏切换⽬前学习的Vue提供的组件有：component、template、transition、transition-group5.10 组件切换-使⽤Vue提供的component元素实现组件切换5.11 组件切换-应⽤切换动画和mode⽅式Day041、组件传值-⽗组件向⼦组件传值和data与props的区别1、⼦组件中，默认⽆法访问到⽗组件中的data上的数据和methods中的⽅法2、data和props区别：（1）组件中 props 中的数据，都是通过⽗组件传递给⼦组件的；props中的数据，都是只读的，⽆法重新赋值；props把⽗组件传递过来的parentmsg属性，现在props数组中，定义⼀下，这样，才能使⽤这个数据；（2）⼦组件中的data数据，并不是通过⽗组件传递过来的，⽽是⼦组件⾃⼰私有的，⽐如：⼦组件通过Ajax请求回来的数据， 都可以放到data⾝上；data上的数据,是可读可写的；2、组件传值-⼦组件通过事件调⽤向⽗组件传值func="show">3、组件案例-列表的发表评论刷新（之后补充）4、使⽤ref获取DOM元素和组件引⽤5、路由-前端路由和后端路由的概念5.1 什么是路由1、后端路由：对于普通的⽹站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；2、前端路由：对于单页⾯程序来说，主要通过URL中的hash(#号)来实现不同页⾯之间的切换，同时，hash有⼀个特点：HTTP请求中不会包含hash相关的内容；所以，单页⾯程序中的页⾯跳转主要⽤hash实现；3、在单页⾯应⽤程序中，这种通过hash改变来切换页⾯的⽅式，称作前端路由（区别于后端路由）；5.2 路由-安装vue-router2、模块化安装5.3 路由-vue-router的基本使⽤1、安装vue-router模块（要先按照vue）2、创建⼀个路由对象，当导⼊vue-router包之后，在window全局对象中，就有了⼀个路由的构造函数，叫做VueRouter在new路由对象的时候，可以为构造函数，传递⼀个配置对象route 这个匹配对象中的route表⽰【路由匹配规则】的意思每个路由规则，都是⼀个对象，这个规则对象⾝上，有两个必须的属性；属性1是path，表⽰监听哪个路由链接地址；属性2是component，表⽰，如果路由是前⾯匹配的path，则展⽰component属性对应的那个组件；注意：component的属性值，必须是⼀个组件的模板对象，不能是组件的引⽤名称；//

组件的模板对象 var login = { template: "

登录组件

" } var register = { template: "

注册组件

" } var routeObj = new VueRouter({ routers: [ {path: '/login', component: login}, {path: "/register", component: register} ] })将路由规则对象，注册到app实例上，⽤来监听URL地址的变化，然后展⽰对应的组件let app = new Vue({ el: "#app", data: {}, methods: {}, //

将路由规则对象，注册到app实例上，⽤来监听URL地址的变化，然后展⽰对应的组件 router: routeObj })3、容器：router-view 元素vue-router提供的元素，专门当做占位符的，将来，路由规则匹配的组件，就会展⽰到这个router-view中去所以，我们可以把router-view看做占位符

5.4 路由-router-link的使⽤router-link 默认渲染为⼀个a标签，可以通过tag属性来改变要渲染成什么标签；5.5 路由-路由redirect重定向的使⽤默认打开页⾯是在login页⾯；这⾥的redirect和Node中的redirect完全是两码事；var routeObj = new VueRouter({ routes: [ {path:"/",redirect:"/login"},//这⾥的redirect和Node中的redirect完全是两码事

{path: '/login', component: login}, {path: "/register", component: register} ] })5.6 路由-设置选中路由⾼亮的两种⽅式var routeObj = new VueRouter({ routes: [ {path:"/",redirect:"/login"},//这⾥的redirect和Node中的redirect完全是两码事 {path: '/login', component: login}, {path: "/register", component: register} ],

//使⽤路由的构造选项linkActiveClass来全局配置 linkActiveClass:'myactive' })5.7 路由-为路由切换启动动画

5.8 路由传参-使⽤query⽅式传递参数在路由规则中定义参数：5.9 路由传参-使⽤params⽅式传递路由参数5.10 路由-使⽤children属性实现路由嵌套使⽤children属性实现⼦路由，同时，⼦路由的path前⾯不要带“/”，否则永远以根路径开始请求，这样不⽅便我们⽤户去理解URL地址5.11 路由-使⽤命名视图实现经典布局Day051、名称案例-使⽤keyup事件实现 keyup="getFullname">keyup="getFullname">2、名称案例-使⽤watch监听⽂本框数据的变化使⽤这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数3、watch-监视路由地址的改变watch通过⽤来监听⾮DOM元素的事件的监听；4、computed-计算属性的使⽤和3个特点在computed中，可以定义⼀些属性，叫做【计算属性】，计算属性的本质，就是⼀个⽅法，只不过我们在使⽤这些计算属性的时候，是把它们的名称直接当做属性来使⽤的，并不会把计算属性当做⽅法来调⽤。注意1：计算属性在引⽤的时候，⼀定不要加（）去调⽤，直接把它当作普通属性去使⽤就好了；注意2：只要计算属性，这个function内部所⽤到的任何data中的数据发⽣了改变，就会重新计算这个计算属性的值；注意3：计算属性的求值结果会被缓存起来，⽅便下次直接使⽤；如果计算属性⽅法中，所依赖的任何数据都没有发⽣过变化，则不会重新对计算属性求值；5、methods，watch，computed对⽐1、computed属性的结果会被缓存，除⾮依赖的响应式属性变化才会重新计算。主要当做属性来⽤；2、methods⽅法表⽰⼀个具体的操作，主要书写业务逻辑；3、watch⼀个对象，键是需要观察的表达式，值是对应回调函数，主要⽤来监听某些特定数据的变化，从⽽进⾏某些具体业务逻辑操作，可以看作是computed和methods的结合体；6、nrm的安装使⽤作⽤：提供了⼀些最常⽤的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包⼀开始只是存在与国外的NPM服务器，但是由于⽹络原因，经常访问不到，这时候，我们可以在国内，创建⼀个和官⽹完全⼀样的NPM服务器，只不过，数据都是从⼈家那⾥拿过来的，除此之外，使⽤⽅式完全⼀样；注意：nrm只是单纯的提供了⼏个常⽤的下载包的URL地址，并能够让我们在这⼏个地址之间，很⽅便的进⾏切换，但是，我们每次装包的时候，使⽤的装包⼯具都是npm;1、运⾏npm install nrm -g 全局安装nrm包；2、使⽤查看当前所有可⽤的镜像地址以及当前所使⽤的镜像源地址；3、使⽤nrm use npm 或nrm use taobao 切换不同的镜像源地址；7、Webpack的学习7.1 Webpack-概念的引⼊在⽹页中会引⽤哪些常见的静态资源？JS： .js、 .jsx、.coffee、.ts(Typescript)；CSS：.css、.less、.sass(基本没⼈⽤)、.scssImages：.jpg、.gif、.svg字体⽂件（Fonts）：.ttf、.svg、.woff、.woff2模板⽂件：.ejs、.jade（不好⽤）、.vue(这是在webpack中定义组件的⽅式，推荐这么⽤)⽹页中引⼊的静态资源多了以后有什么问题？1、⽹页加载速度慢，因为，我们要发起很多的⼆次请求；2、要处理错综复杂的依赖关系；如何解决上述两个问题？1、合并、压缩、精灵图、图⽚的base64编码；2、可以使⽤之前学过的requireJS，也可以使⽤webpack（可以解决各个包之间的复杂依赖关系）；什么是webpack？webpack是前端的⼀个项⽬构建⼯具，它是基于开发出来的⼀个前端⼯具；如何完美实现上述的2种解决⽅案：1、使⽤Gulp，是基于task任务的；2、使⽤webpack，是基于整个项⽬进⾏的；借助于webpack这个⾃动化前端构建⼯具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能；7.2 Webpack-最基本的使⽤⽅式webpack 安装的两种⽅式：1、运⾏npm i webpack -g,全局安装webpack，这样就能在全局下使⽤webpack了；2、在项⽬根⽬录下运⾏ npm i webpack --save-dev安装到项⽬依赖中；webpack可以做什么事情：1、webpack能够处理JS⽂件的互相依赖关系；2、webpack能够处理JS的兼容问题，让⾼级的、浏览器不识别的语法，转换为低级的、浏览器能正常识别的语法；刚刚运⾏的命令格式：webpack 要打包的⽂件的路径 打包好的输出⽂件的路径；（全局安装后可以这样写）7.3 webpack-最基本的配置⽂件的使⽤配置⽂件：const path = require('path')s = { entry: (__dirname, './src/'),//

⼊⼝，表⽰，要使⽤ webpack

打包哪个⽂件 output: { //

输出⽂件相关的配置 path: (__dirname, './dist/'), //

指定

打包好的⽂件，输出到哪个⽬录中去 filename: '' //

这是指定

输出的⽂件的名称 }, //

通过选择 development

或 production

之中的⼀个，来设置 mode

参数，可以启⽤相应模式下的 webpack

内置的优化 mode:'development'}当我们在控制台直接输⼊webpack命令执⾏的时候，webpack做了以下⼏步：1、⾸先，webpack发现，我们并没有通过命令的形式，给它指定⼊⼝和出⼝；2、webpack就会去项⽬的根⽬录中，查找⼀个叫做的配置⽂件；3、当找到配置⽂件后，webpack会去解析执⾏这个配置⽂件，当解析执⾏完配置⽂件后，就得到了配置中导出的配置对象；4、当webpack拿到配置对象后，就拿到了配置对象中，指定的⼊⼝和出⼝，然后进⾏打包构建；7.4 webpack-dev-server的基本使⽤使⽤webpack-dev-server这个⼯具，来实现⾃动打包编译的功能；1、运⾏npm install webpack-dev-server -D把这个⼯具安装到项⽬的本地开发依赖；2、安装完毕后，这个⼯具的⽤法，和webpack命令的⽤法，完全⼀样；3、由于我们是在项⽬中本地安装的webpack-dev-server，所以，⽆法把它当作脚本命令，在powershell终端中直接运⾏；（只有那些安装到全局-g的⼯具，才能再终端中正常执⾏）；4、注意：webpack-dev-server 这个⼯具，如果想要正常运⾏，要求，在本项⽬中，必须安装webpack5、webpack-dev-server帮我们打包⽣成的⽂件，并没有存放到实际的物理磁盘上，⽽是直接托管到了电脑的内存中，所以，我们在项⽬根⽬录中，根本找不到这个打包好的；6、我们可以认为webpack-dev-server把打包好的⽂件以⼀种虚拟的形式托管到了咱们项⽬的根⽬录中，虽然我们看不到它，但是可以认为和dist 、src、node-modules平级，有⼀个看不见的⽂件，叫做;node nodemonwebpack webpack-dev-server

怎么停⽌webpack-dev-server：Ctrl+C ,然后选择y即可7.5 webpack-dev-server的常⽤命令参数7.6 webpack-dev-server配置命令的第⼆种⽅式（了解）在配置⽂件⾥⾯写：const path = require('path')s = { entry: (__dirname, './src/'),//

⼊⼝，表⽰，要使⽤ webpack

打包哪个⽂件 output: { //

输出⽂件相关的配置 path: (__dirname, './dist/'), //

指定

打包好的⽂件，输出到哪个⽬录中去 filename: '' //

这是指定

输出的⽂件的名称 }, //

通过选择 development

或 production

之中的⼀个，来设置 mode

参数，可以启⽤相应模式下的 webpack

内置的优化 mode:'development', devServer:{ //这是配置dev-server命令参数的第⼆种⽅式，相对来说，这种⽅式⿇烦⼀些 open:true,//

⾃动打开浏览器 port:3000,//

设置启动时候的运⾏窗⼝ contentBase:"src", hot:true //启⽤热更新

}}7.7 html-webpack-plugin的两个基本作⽤这个插件的两个作⽤：1、⾃动在内存中根据指定页⾯⽣成⼀个内存的页⾯；2、⾃动把打包好的追加到页⾯中去；使⽤html-webpack-plugin插件配置启动页⾯：由于使⽤–contentBase指令的过程⽐较繁琐，需要指定启动的⽬录，同时还需要修改中script标签的src属性，所以推荐⼤家使⽤html-webpack-plugin插件配置启动页⾯；1、运⾏cnpm i html-webpack-plugin --save-dev安装到开发依赖；2、修改配置⽂件如下：7.8 loader-配置处理css样式表的第三⽅loader注意：webpack默认只能打包处理JS类⽂件，⽆法处理其他的⾮JS类型的⽂件如果要处理⾮JS类型的⽂件，我们需要⼿动安装⼀些合适第三⽅loader加载器；1、如果想要打包处理css⽂件，需要安装npm install style-loader css-loader -D2、打开这个配置⽂件，在⾥⾯新增⼀个配置节点，叫做module，它是⼀个对象；在这个module对象⾝上，有个rules属性，这个rules是⼀个数组，这个数组中存放了所有第三⽅⽂件的匹配和处理规则；7.9 loader-分析webpack调⽤第三⽅loader的过程webpack处理第三⽅⽂件类型的过程：1、发现这个要处理的⽂件不是JS⽂件，然后就去配置⽂件中，查找有没有对应的第三⽅loader规则；2、如果能找到对应的规则，就会调⽤对应的loader处理这种⽂件类型；3、在调⽤loader的时候，是从后往前调⽤的；4、当最后的⼀个loader调⽤完毕，会把处理的结果，直接交给webpack进⾏打包合并，最终输出到中；7.10 loader-配置处理less⽂件的loader7.11 loader-配置处理scss⽂件的loader7.12 webpack中url-loader的使⽤默认情况下，webpack⽆法处理css⽂件中的url地址，不管是图⽚还是字体库，只要是url地址，都处理不了 //

这个节点⽤于配置所有的第三⽅模块加载器 module: { rules: [ //

所有第三⽅模块的匹配规则 // test属性是要匹配的规则（正则），use⽤来指定⽤什么来处理 { test: /.css$/, use: ['style-loader', 'css-loader'] }, { test: /.(jpg|png|bmp|jpeg|gif)$/, use: [ { loader: 'url-loader', options: { limit: false, }, } ] },//

处理图⽚路径的loader { test: /.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' } //

处理字体图标路径的loader ] }7.13 关于webpack和npm中的⼏个问题的说明1、json⽂件中不能写注释；7.14 webpack中babel的配置（来处理⾼级的JS语法）