学习笔记 - 简书

半个月来学到的东西主要有以下方面：
一、git
git学到了很多新命令：
1.git fetch 仓库代码覆盖本地
2.git push origin -f 强制提交代码到仓库
3.git pull --rebase origin master 查看冲突，如果有冲突执行git add提交需要提交的文件再执行git rebase --continue，然后push到仓库
4.git revert -n 目标版本号新增加一个版本删除目标版本号的改动保留目标版本号后面版本的改动
5.git reset --hard 目标版本号将版本回退，删除目标版本号之后的版本
二、vue
对vue的使用更熟练了，组件传值，还有一些api功能和参数记忆更清晰了
三、webpack
因为前几天配置了webpack的vConsole，对此产生了一些问题（1.webpack如何将那么多代码打包为一个js文件，这个js文件做了什么，2.Loader是怎么实现的，3.怎么写一个Plugin），所以详细的看了一些使用方法和原理
1.基本使用：webpack有五个核心概念：
Entry:入口，webpack的构建从这里开始
Module：模块，Webpack 里都是模块，一个模块对应一个文件。Webpack 从配置的 Entry 开始找出所有依赖的模块
Chunk：代码块，一个代码块由多个模块组成，用来合并分割代码
Loader：模块转换器，将匹配到的模块按照相对应的loader转化为新内容
Plugin：扩展插件
2.工作原理：
主要流程：
1.初始化：开始构建，从配置文件(默认webpack.config.js)和shell语句中读取合并配置参数，加载Plugin
2.编译：从Entry开始，每个Module调用对应的LoaderLoader根据对应规则转化为新内容，然后找到Module依赖的Module，这样递归的编译
3.输出：把编译完成的Module转为代码块，代码块再根据配置(webpack.config.js 和 shell)确定输出的路径和文件名
每个流程都会有一些对应的事件，比如Entry-option（读取配置的Entrys,为每个Entry实例化一个对应的EntryPlugin,为后面该Entry的递归解析工作做准备），可以用以下代码段监听到事件

compiler.plugin('entry-option', (options) => {
      console.log('@entry-option');
})

   3.解决问题
          1.这么多文件怎么转化为一个js：上面的工作流程已经说明
          2.这个js文件做了什么：生成的bundle.js是一个立即执行函数，它通过定义了一个可以在浏览器中执行的函数__webpack_require_来模拟require方法，然后把那些模块放到__webpack_require_数组里，执行一次加载

//立即执行函数执行后对所有模块进行一次加载
(function(modules){
    //__webpack_require__模拟require语句
    function __webpack_require__(){}
    //__webpack_require__数组的第一个模块
    __webpack_require_[0]
})(//把存放所有模块的数组放到这里作为立即执行函数的参数)

          3.Loader是怎么实现的：Loader就是对文件做处理生成新内容

//可以安装第三方模块调用

const sass = require('node-sass')
module.exports = function(source) {
  //这里对source做一些转换
  let newSource = sass(source)
  //返回新内容
  return newSource
}

        4.怎么写一个Plugin：

class MyPlugin() {
   constructor(options){
    //在这里会传入用户的配置
   }
  // Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler){
    compiler.plugin('compilation',function(compilation) {
    })
  }
}
//导出Plugin
module.exports = MyPlugin
使用这个Plugin：
const MyPlugin = require('./MyPlugin.js');
module.export = {
  plugins:[
    const options = {
        a: true,
        b: false
    }
    new MyPlugin(options),
  ]
}

四、其他
1.模板字符串``里面的html会被解析为html执行
2.数据处理能力的提升，因为要对后端返回的数据进行一些格式化，比如包裹标签，加字符，合并字符，对于数据处理更熟练了