首先我要阐明一下，没错，还是没有进入vue，刘备请诸葛亮三次都能够了吧，我这也是第三次了，也相对是最初一次了，我应经摸透了因为，最初的webpack打包加上一个git学了过后我就去vue了。

为什么要说先看这篇，其实跟咱们明天的主题webpack没有太大关系，昨天学了一下webpack，其实内容没多少，webpack的内容无非就是参考文档去怎么做，而后最次要的js、html生成、css、字体图标、图片来打包包含开启一个webpack服务器。然而咱们明天的次要内容，然而我要说的是比拟重要的是，在学的敌人们，正在学包含前面在学的敌人们，作为一个程序员还在手写笔记吗？我也是昨天才晓得手写笔记的就我一个，我都惊了，我那么大一本笔记本，又长又厚的，我都做了那么多了，竟然当初才晓得，属实太亏了，毕竟也是那个情理，如果前面工作不可能去翻书吧，优不优雅暂且不说，这消耗的工夫就离谱尽管我本人做的笔记，我大略晓得哪个知识点在哪一页。

那么既然不太举荐手写笔记了，那要用什么来做呢，程序员必备——Markdown！而他比拟好的一款编辑器——Typora，昨天也花了一点工夫理解了一下它有哪些性能哪些快捷键，的确这样做笔记不便查找，而且省时最次要的，我原来学内容可能内容没多少，然而也挺多的，满打满算都是一天的工夫，反正当初有了这个，特地是代码局部，有时候我还要手写代码，这个间接一个截图的事件，你能够本人想想节俭了多少工夫。

至于我以前在笔记本上的，我的打算是，暴力一点，间接全 背 下 来。

1.

回到咱们明天的主题上来，首先第一个内容说一下vue的前提根底，首先es6的模块化，首先晓得commanjs吧，是咱们node的规定，require、exports都是他的语法，但他不是规范举荐的，真正的正统规范是ES6模块化，而且commanjs只反对后端，而es6反对前后端。

他的一个语法规定：

1.1

导入为import 裸露共享成员export 没有了s

如果咱们node.js要应用es6模块化的话首先版本号是要大于14.15.1的，其次须要在package.json增加“type”：“module”

对于他的导入导出一共有两大类，第一类是默认导入导出。

export default 和 import 自定义 from ‘门路’ 留神门路必须增加后缀js跟咱们的commanjs不一样

let x = 19let y = 29function show() {}export default  {    x,    show}
import m1 from './默认导出.js'console.log(m1);

而后按需导出 export const a = 1 就是谁要导出就在定义它的后面加一个export

按需导入 import ｛a｝ from ‘’ 这个要留神的是花括号外面的名字不再自定义必须和咱们导出的统一，然而咱们能够用as重命名

export let x = 10export function show() {console.log('hello vue');}
import {x, show} from './按需导出.js'console.log(x, show);

最初是咱们的间接导入，间接导入其实也挺罕用比方css，或者js间接就是一段代码，能够间接导入进来不应用，他们本人有本人的用途

for(let i = 0; i < 5; i++) {    console.log(i);}
import './间接导入代码.js'

有一说一，这个代码块跟typora一样，看来这一步棋走对了。

2.

而后看到咱们的promise这个构造函数

2.1

先理解一下回调天堂的问题吧，什么叫做回调天堂，就是咱们多层嵌套回调函数，自身就是回调函数，还一层一层嵌套，他执行了才去执行外面的，其实也就是咱们的高阶函数，那么这个时候就有问题了，咱们要改下面的代码前面也要跟着改，而且大量冗余的代码可读性也差。

2.2

而后说回到咱们的promise，没错它自身是个构造函数，而后他的prototype下面有一个.then的办法，所以他的实例是能够用的，这个.then是个什么办法，他就是用来预先指定胜利或者失败的回调函数的，胜利是必选参数，失败是可选。

比方咱们上面通过一个案例来说，基于回调来读取内容，一个文件夹上面三个txt，以前的做法不必多说了的通过fs读完一个又在外面嵌套一个，这就是典型的回调天堂。

咱们的fs模块不反对promise的办法所以咱们须要下载一个包then-fs

import thenfs from 'then-fs'thenfs.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实例对象呢？

import thenfs from 'then-fs'thenfs.readFile('./files/1.txt', 'utf8').then((r1) => {    console.log(r1);    return thenfs.readFile('./files/2.txt', 'utf8')}).then((r2) => {    console.log(r2);    return thenfs.readFile('./files/3.txt', 'utf8')}).then((r3) => console.log(r3))

2.4

捕捉谬误

咱们promise有一个捕捉谬误的办法，避免后面因为什么货色产生谬误，而导致整盘解体，当然如果你大略晓得是哪里可能有点问题也能够吧这个办法前移，那么这样就会继续执行前面的

import thenfs from 'then-fs'/* thenfs.readFile('./files/11.txt', 'utf-8').then((r1) => {    console.log(r1);    return thenfs.readFile('./files/2.txt', 'utf-8') //这里不做失败的回调函数，当咱们胜利后是不是又通过return反悔了一个thenfs发明的promise的实例对象}).then((r2) => {    console.log(r2);    return thenfs.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);    return thenfs.readFile('./files/2.txt', 'utf-8') //这里不做失败的回调函数，当咱们胜利后是不是又通过return反悔了一个thenfs发明的promise的实例对象}).then((r2) => {    console.log(r2);    return thenfs.readFile('./files/3.txt', 'utf-8')}).then((r3) => {    console.log(r3);})

2.5

promise.all办法这是用来发动并行的异步操作的，什么意思，就是一个期待机制，多个异步操作，期待他们全副实现才会去执行then外面的函数

import thenfs from 'then-fs'let 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

来一个案例，封装一个promise获取文件的函数，这个函数最次要的是要搞懂咱们的回调与then之间这的关系，return 一个 new promise发明一个实例，而他只是模式上的promise实例对象，还须要往里面增加一个函数，这个函数两个参数就是用来承受then的两个胜利和失败的函数，所以这两个参数是函数，再在外面来读取，fs的操作步骤，也有失败和后果去把后果给到方才对应的两个参数

import fs from 'fs'function getTxt(Fpath,type) {    return new Promise(function(suc, wro)  {        fs.readFile(Fpath, type, (err, result) => {            if(err) return wro(err.message)            suc(result)        })    })}getTxt('./files/1.txt', 'utf8').then((r1) => {    console.log(r1)},(err) => {    console.log(err)})

2.7

简化异步操作 。

方才咱们的不论是all办法还是按程序执行的函数是不是都是为了能让咱们的异步操作能依照程序执行进去，上面是不仅执行了异步操作而且还能依照程序执行进去的简化步骤用到await、async

import thenfs from 'then-fs'async function getFile() {    const r1 = await thenfs.readFile('../promise/files/1.txt', 'utf-8')     console.log(r1);    const r2 = await thenfs.readFile('../promise/files/2.txt', 'utf-8')     console.log(r2);    const r3 = await thenfs.readFile('../promise/files/3.txt', 'utf-8')     console.log(r3);}getFile()

function中用到await，函数就必须被async润饰。

不加await就是promise实例，加了就能返回值间接输入。

在await第一个之前是同步输入，前面都为异步工作

import thenfs from 'then-fs'console.log('A');async function getFile() {    console.log('B')    const r1 = await thenfs.readFile('../promise/files/1.txt', 'utf-8')     const r2 = await thenfs.readFile('../promise/files/2.txt', 'utf-8')     const r3 = await thenfs.readFile('../promise/files/3.txt', 'utf-8')     console.log(r1,r2,r3);    console.log('D');}getFile()console.log('C');

这个你认为输入进去是多少？

ABCr123最初D

3.

事件流，工夫循环我本人口述一遍吧，之前也说过的，咱们的工作分为同步工作和异步工作，同步工作会优先在主栈道上执行完，异步工作会依据宿主环境在那里执行，然而异步工作都是有回调函数的，所以执行了就会把函数放到异步工作的排列队伍，等到同步工作执行完，就会来依照程序执行异步工作。

3.1

js又把异步工作进一步划分了宏工作和微工作。

宏工作：比方ajax、计时器、文件操作等

微工作：promise那几个办法、prcess.nextTick等

在异步工作中会优先执行宏工作再去查看这个宏工作外面的微工作，而后再去执行宏工作这样一个循环，来看一个经典面试题，你看输入的什么？

console.log('1');setTimeout(() => { console.log('2');    new Promise (function(resolve) {     console.log('3');     resolve() }).then(function() {     console.log('4'); })});new Promise(function(resolve) {    console.log('5');    resolve()}).then(function() {    console.log('6');})setTimeout(() => {    console.log('7');       new Promise (function(resolve) {        console.log('8');        resolve()    }).then(function() {        console.log('9');    })   });

正确答案：156234789

这个最大的难点我感觉在于当咱们进入一个作用域后，会是一个全新的作用域，在这个外面再去从新对待外面的一些工作，就相当于你当初在这个作用域外面就是全局作用域

4.

进入webpack。

webpack实质上是一个第三方模块包，他能够起到压缩、翻译、打包、降级的作用。

webpack环境筹备：

yarn init 初始化

yarn add webpack

在package外面增加执行命令“build” ：“webpack”

反正webpack始终要记住一点他只反对js，其余的都须要去文档上看怎么转过来。

而且他的操作也比拟法则化，先定义好文件，css要有css文件，字体图标要有字体图标文件，而后要跟咱们的入口文件挂上钩，像img图片、字体图标这些须要动态创建在入口文件外面，css间接导入，包含更改默认出入口，加载器、插件这些都是在webpack.config.js这个配置文件外面改。

另外的留神点就是咱们的图片解决只针对于img标签，背景图片会被css解析的，然而最好还是要做图片解决，因为如果type为asset的话，会以8kb作为一个辨别