自己学了几年前端，但是一直都没有系统的学习，平时找到一些视频看不懂的也就跳过了，直到今天入职，虽然是实习生，不过我的师父问我的基础基本不会还是很尴尬的，讲一讲入职第一天的感受吧！可能有些东西写的不过完整，在之后的日子里会把自己总结的知识点专门拎出来写。

一、Git Flow

前几天用过git，看了一些教程，对git还是大致有些了解的，这里推荐一个网站相比于git的官方文档来说，这里说的还是比较通俗易懂的。
至于什么是GitFlow呢？学习了Git之后知道，Git是有分支的，在一个公司或者是一个团体开发一个项目的时候为了提高效率，每个人都会在自己的分支上开发项目，最后合并到一起成为一个上线的项目，但是这个分支总不能随意创建吧，不然反而会变得更加混乱，于是就有了GitFlow，大家都遵循GitFlow的规则来开发，就不会混乱了。先上图：

常用的分支

1.master

这个分支在创建的时候默认就有了，会一直存在，但是一般不在这个分支上面工作，这个分支每次更改都要打上Tag，也就版本号，我们平时看到的上线的产品就是在master分支上的，所以一般不用于开发，只是用来上线。

2.develop

develop分支也会一直存在，他是开发分支的主干，主要用于合并feature分支，一般也不会在这个分支上面工作。

3.feature

feature分支为新功能分支，这个分支就是我们平常工作的分支了，feature分支可以有很多个，每当我们在完成一个功能的时候，就可以把他合并到develop分支上了

4.release

当做的新功能足够发布一个新版本时候，就可以发布到master上了，但是还不能直接合并，一个公司的产品正式的上线肯定是很严谨的，所以这时候会临时出现一个release分支用于测试，他只会短暂的存在一段时间，测试之后如果没有发现bug，就把他合并到master分支上并且删除这个分支

5.hotfix

再严谨的工作偶尔总会出现纰漏，如果产品上线之后发现了一些必须要解决的bug，hotfix分支就有存在的必要了，他的存在就是再产品上线之后发现了bug要紧急修复，修复完成后再合并到master分支develop分支上，然后就可以删除hotfix分支了，他的存在时间也很短暂

二、webpack

最尴尬的就是webpack了，之前对webpack只是了解，从来都没有写过，可以说是一点也不了解。不了解学呗，先是看了webpack中文网后来看了阮一峰老师的webpack教程，里面有15个demo，每个demo的解释再最下面，虽然都是英文，看不懂就百度翻译一下吧。下载来之后先把webpack全局安装下，命令行输入

npm i -g webpack webpack-dev-server
安装成功后命令行进入下载的文件夹，输入命令行
npm install
下载依赖项
这几个步骤是必须要的
先看下demo01文件目录：
bundle.js是打包生成的，不要管他，package.json是配置文件也先不去管他，我们主要关系的就是另外三个文件，先看index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

代码不长，只是引入了一个js文件，然后是main.js

document.write('<h1>Hello World</h1>');

这里就更短的，只有一句基本的基础语法，显示一个HelloWord，按理说这两个文件是没有任何关联的，但是我们npm run dev把他运行起来，发现在index.html里确实出现了HelloWord，两个文件没有直接的关系，他们是怎么对应起来的呢？答案要去第三个文件，webpack.config.js里面，先看代码

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

webpack的官方文档说过，webpack有个入口，刚开始不理解没关系，看了这个文件之后大概就知道入口文件是什么意思了，entry后面跟的就是入口文件，也就是说从main.js这个文件开始打包，output就是输出文件，从main.js开始，最后打包的结果放到bundle.js文件中，我们可以打开bundle.js文件看看，发现里面是一串很长很长的代码，这里代码也不需要我们去读懂，但是我们可以找到main.js中的那句话，也就是说webpack从main.js出发，虽然现在只有一个文件，但是当工程量大的时候肯定就不止一个文件了，把这些文件从main.js开始，打包起来之后再bundle.js输出出来，html中只要加载一个js文件。之后看下第二个文件夹demo02

发现有七个文件，而我们要关注的只要三个文件，main1.js、main2.js、webpack.config.js。index.html改动的不多，只是多导入了一个bundle2.js。main1和main2两个js文件分别输出一句话，大家应该都懂什么意思，在webpack文件里面

module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

发现有两个入口文件，输出文件其实也不止一个，[name]代表每个入口文件输出的js文件名称，比如第一个入口文件是main.js，这个字段的key（名称）叫做bundle1，那么[name]就是bundle1，说这么多不如手动操作试一试，首先enter再加一个入口文件

  module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js',
    bundle3: './main3.js',
  },
  output: {
    filename: '[name].js'
  }
};

自己新建一个main3.js,随便打一句话，然后导入bundle3.js，npm build 一下，然后npm run dev运行起来，发现main3.js中的语句输出出来了，在npm build 之后，bundle3.js文件确实生成出来了。然后是第三个文件

main.jsx是react文件，不多解释，但是很推荐大家学习一下，可以看下react的文档在webpack文件里面

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

输入文件和输出文件不多解释了，相比之前两个demo，这里多了一个module字段，module里面有个rules字段，他代表规则，规则可以有很多，一个规则一个rules，rules有个test，test后面是正则表达式，表示这个规则使用于.jsx文件，其他文件规则不归他馆，exclude代表排除，也就是说node_modules这个文件夹里的文件他也不管，这种文件夹里面都是一些依赖库，也不需要打包，然后就是use，loader代表编译器，可以理解为百度翻译一样，use这段就相当于把es21015，也就是es6和react翻译成js语法。

后面还有12个demo就不一一解释了，理解了前三个之后后面的还是比较好理解的，要深入学习的话还是要去看webpack的中文网

入职第一个感触还是很多的，其实前天就应该写完了，第一次写博客也不是很熟悉，再加上晚上还断网拖到现在才写好，以后还是要多写写博客，有什么理解透彻了也在这里总结下，有什么写的不好的地方欢迎各位大佬前来批评！！！！