首先我想说明一下，是的，我还没有进入vue，刘北能三问诸葛亮。嗯，这对我来说也是第三次了，也肯定是最后一次。我应该想通了，因为在学习了最终的webpack包并添加了一个git之后，我去了vue。为什么我说先阅读这篇文章？其实和我们今天的webpack话题没有任何关系。昨天了解了webpack。其实内容不多。webpack的内容无非就是如何参考文档，然后最重要的js和html的生成，css，字体图标，图片的打包包括启动一个webpackserver。但是我们今天的主要内容，但是我想说的更重要的是，正在学习的朋友们，包括后面正在学习的朋友们，作为程序员的你们还在写笔记吗？直到昨天，我才发现我是唯一一个手写笔记的人。我很震惊。我有这么大的笔记本，又长又厚。因此，如果在以后的工作中无法翻书，别说文雅与否，所花的时间也是离谱的。虽然自己做了笔记，但大概知道哪个知识点在哪一页。那么既然不推荐手写笔记，那应该用什么呢？程序员必备——Markdown！而他的一个比较好的编辑器Typora昨天花了一点时间了解了它的功能和快捷键。确实这样找笔记很方便，最重要的是节省时间。本来学的可能内容不多，但是也挺多的。这需要一整天。不管怎样，既然有了这个，尤其是代码部分，有时我不得不手写代码。大家可以想想直接截图能省多少。时间。至于我以前在笔记本上写的东西，我的计划是稍微暴力一下就全部记住。1.回到我们今天的话题，首先说一下Vue的前提，首先是es6的模块化，首先要了解一下commanjs，它是我们node的规则，require和exports是他的语法，但是他是不被标准推荐的。真正正统的标准是ES6模块化，commanjs只支持后端，而es6支持前后端。他的语法规则之一：1.1importasimportexposedsharedmembersexportwithouts如果我们要在node.js中使用es6模块化，首先版本号必须大于14.15.1，然后我们需要在里面加上“type”package.json:"module"有导入和导出两大类。第一类是默认导入导出。exportdefaultandimportcustomfrom'path'注意路径一定要加后缀js和我们commanjs不同letx=19lety=29functionshow(){}exportdefault{x,show}importm1from'./defaultexport.js'console.log(m1);然后exportondemandexportconsta=1，也就是谁要export要在定义前面加export，importondemandimport{a}from''这个要注意花括号里的名字不再自定义并且必须与我们导出的一致，但我们可以将其重命名为asexportletx=10exportfunctionshow(){console.log('hellovue');}import{x,show}from'./Exporton要求。js'console.log(x,show);最后是我们直接导入，直接导入其实挺常见的比如css，或者js直接就是一段代码，可以直接导入不用，它们有自己的用处for(leti=0;i<5;i++){console.log(i);}import'./directlyimportcode.js'有话要说，这个代码块和typora一样，看来这一招走对了。2.然后看我们的promise构造函数2.1首先理解回调地狱的问题，什么叫回调地狱，就是我们多层嵌套的回调函数，它本身就是一个回调函数，一层层嵌套，他执行的是实际上是我们的高层函数，所以这个时候就有问题了。如果要改上面的代码，后面还要改，而且很多冗余代码的可读性也很差。2.2那么让我们回到我们的承诺。是的，它本身就是一个构造函数，它的原型有一个.then方法，所以它的实例是可以使用的。这到底是什么方法？如果指定成功或失败回调函数，success是必填参数，failure是可选参数。例如，我们使用下面的一个案例来读取基于回调的内容。一个文件夹下有三个txt文件。不用说了，之前的做法是通过fs读一个，然后在里面嵌套一个。这是一个典型的回调地狱。.我们的fs模块不支持promise方法，所以我们需要从'then-fs'下载一个包then-fsimportthenfsthenfs.readFile('./files/1.txt','utf-8').then((r1)=>console.log(r1))thenfs.readFile('./files/2.txt','utf-8').then((r2)=>console.log(r2))thenfs.readFile('./files/3.txt','utf-8').then((r3)=>console.log(r3))可以看到可以通过promise方法输出，但是有问题该顺序不正确。这是因为异步的原因。后面讲2.3先解决我们的顺序问题。我们怎样才能让它们按顺序出现？想通了一件事，我们的thenfs读取了一个promise实例对象，这样我们后面就可以使用then方法了。如果我们先输出，然后在成功的返回函数中返回下一个promise实例对象呢？从'then-fs'导入thenfsthenfs.readFile('./files/1.txt','utf8').then((r1)=>{console.log(r1);returnthenfs.readFile('./files/2.txt','utf8')}).then((r2)=>{console.log(r2);returnthenfs.readFile('./files/3.txt','utf8')}).then((r3)=>console.log(r3))2.4捕获错误我们的promise有一个捕获错误的方法，以防止整个磁盘由于过去的错误而崩溃。当然，如果你知道它在哪里，可能有点问题也可以把这个方法往前移，那么它会继续执行下面的importthenfsfrom'then-fs'/*thenfs.readFile('./files/11.txt','utf-8').then((r1)=>{console.log(r1);返回nfs.readFile('./files/2.txt','utf-8')//这里没有失败的回调函数。当我们成功时，是否返回一个thenfs通过return创建的promise实例对象}).then((r2)=>{console.log(r2);returnthenfs.readFile('./files/3.txt','utf-8')}).then((r3)=>{console.log(r3);}).catch((err)=>{console.log(err.message);})*/thenfs.readFile('./files/11.txt','utf-8').catch((err)=>{console.log(err.message);}).then((r1)=>{console.log(r1);returnthenfs.readFile('./files/2.txt','utf-8')//这里没有失败的回调函数，当我们成功的时候，我们是否违背了thenfs创建的一个promise实例对象通过return}).then((r2)=>{console.log(r2);returnthenfs.readFile('./files/3.txt','utf-8')}).then((r3)=>{console.log(r3);})2.5promise.all方法这个是用来发起并行异步操作的，什么意思，是一个等待机制，多个异步操作，等它们都完成了再执行里面的函数然后从'then-fs'导入thenfs让arr=[thenfs.readFile('./files/1.txt','utf-8'),thenfs.readFile('./files/2.txt','utf-8'),thenfs.readFile('./files/3.txt','utf-8')]Promise.all(arr).then((r)=>console.log(r))注意输出的是一个数组，输出顺序使得我们数组中的执行顺序与之对应。还有一个promise.race方法，和all发起并行操作，但是一旦有人执行，它就会输出，也就是说最快的2.6自带case，里面封装了一个promise获取一个文件的函数。这个函数最重要的是理解我们的回调之间的关系，然后，返回一个新的promise来创建一个实例，它只是一个表单，上面的promise实例对象需要给它添加一个函数。这个函数的两个参数是用来接受then的两个success和failure函数的，所以这两个参数都是函数，然后在里面读取，fs的操作步骤，还有failures和results把结果给对应的两个刚才的参数importfsfrom'fs'functiongetTxt(Fpath,type){returnnewPromise(function(suc,wro){fs.readFile(Fpath,type,(err,result)=>{if(err)returnwro(err.message)suc(result)})})}getTxt('./files/1.txt','utf8').then((r1)=>{console.log(r1)},(err)=>{console.log(err)})2.7简化异步操作。刚才不管是all方法还是顺序执行的函数，是为了让我们的异步操作能够顺序执行吗？下面是一个简化的步骤，不仅执行异步操作，还按顺序执行usingawait、asyncimportthenfsfrom'then-fs'asyncfunctiongetFile(){constr1=awaitthenfs.readFile('../promise/files/1.txt','utf-8')console.log(r1);constr2=awaitthenfs.readFile('../promise/files/2.txt','utf-8')console.log(r2);constr3=awaitthenfs.readFile('../promise/files/3.txt','utf-8')console.log(r3);}如果在getFile()函数中使用await，函数必须是由异步修改。不加await就是promise实例，加了直接输出返回值即可。在第一个await之前是同步输出，后面是异步任务importthenfsfrom'then-fs'console.log('A');asyncfunctiongetFile(){console.log('B')constr1=awaitthenfs.readFile('../promise/files/1.txt','utf-8')constr2=awaitthenfs.readFile('../promise/files/2.txt','utf-8')constr3=awaitthenfs.readFile('../promise/files/3.txt','utf-8')console.log(r1,r2,r3);console.log('D');}getFile()console.log('C');你认为输出是什么？ABCr123最后一个D3。事件流，时间循环我自己口述。前面说过，我们的任务分为同步任务和异步任务。同步任务会先在主板上执行，异步任务会根据宿主环境执行。在那里执行，但是异步任务有回调函数，所以执行完后，函数会放在异步任务的队列中，当同步任务执行完后，异步任务会依次执行。3.1js进一步将异步任务分为宏任务和微任务。宏任务：比如ajax、定时器、文件操作等微任务：promise、prcess.nextTick等方法会优先执行异步任务中的宏任务，然后查看这个宏任务中的微任务，然后执行宏在这样一个循环的任务中，我们来看一道经典的面试题。你看到什么输出？console.log('1');setTimeout(()=>{console.log('2');newPromise(function(resolve){console.log('3');resolve()}).then(function(){console.log('4');})});newPromise(function(resolve){console.log('5');resolve()}).then(function(){console.log('6');})setTimeout(()=>{console.log('7');newPromise(function(resolve){console.log('8');resolve()}).then(function(){console.log('9');})});正确答案：156234789我觉得最大的难点是当我们进入一个scope的时候，会是一个全新的scope，我们会在thisscope看里面的一些task，就相当于你现在在这个scope里面是globalscope。4.输入网页包。Webpack本质上是一个第三方模块包，可以进行压缩、翻译、打包、降级。webpack环境准备：yarninit初始化yarnaddwebpack，在package:"webpack"中添加执行命令"build"。反正webpack总要记住它只支持js，需要自己去文档看看怎么转换。而且他的操作也比较有规律，先定义文件，css要有css文件，字体图标要有字体图标文件，然后和我们的入口文件挂钩，比如img图片，字体图标等都需要动态创建在入口文件中，直接导入css，包括更改默认入口和出口，加载器，插件都在配置文件webpack.config.js中更改。还有一点需要注意的是，我们的图片处理只是针对img标签，背景图片会被css解析，但是最好做图片处理，因为如果type是asset的话，8kb会作为区分
