这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程.
本文目录&更新说明个人学习方法分享
与3y同学一起学习Java开发
进阶全栈工程师之路By.Keegan小钢
目录 1.学习方法 2.学习态度 3.全栈开发 4.学习路线(很长) 5.知识拓展(很长)
在这里收取很多人的建议以后决定说明一下,这是我的第一篇使用Markdown语法写的文章,版面可能会有瑕疵,或者易读性并不是那么高(但是知识点真的是这么多),这篇文章主要收集了全栈涉及到各个知识点
后期会根据我本人学习进度进行总结,每个知识点,对,就是每个知识点,我会根据自己的理解写成简书,到时候迫切的希望各位帮我参考,我的看法有时候会出现偏差,还希望各位及时指出.我会认真的回复评论.
我会一直使用简书和个人博客更新个人学习历程~也希望各位能够在这条路上一直走下去.
学习方法这是个人学习方法,还请大家结合自身情况,制定适合自己的学习方法.
首先,我会去收集全栈工程师会涉及的方面,大致分为 前端,后台,服务器. 然后,细化各个阶段不同的知识点,逐一百度进行了解.
了解相关知识的有名书籍,例如服务器的鸟叔私房菜系列书籍,前端的Head First系列,后台的Linux开发手册. 本人整理过相关书籍,以及寻找书籍方法~传送门
本人使用的笔记软件是Omni outliner Mac版,windows的开发者可以使用 幕布 这个应用.一般学习时间会开启3个窗口
自学笔记+视频学习笔记+总结笔记
自学笔记为读书时的笔记和百度到的所有知识点.
视频学习笔记为视频资料学习的笔记.会记录视频当中的各个知识点.
然后去其糟粕,取其精华,写到总结笔记以后,再进行总结.
最后完成各个知识点的学习以及总结.
当遇到代码知识点时一定要进行实际操练以及考察.
要根据自身想法进行延伸考察.才能将知识学到手.
一定要整理适合自己的学习方法,保证学习效率,学习过程中都会遇到瓶颈,当自己无法理解新知识时就是瓶颈
学习态度1.可能是学习方法不够完善,有些知识不够融会贯通.
2.学习跨度不能太大,导致自己理解不了.
3.梳理自己的学习体系,程序语言不是死记硬背,而是靠理解和体会进行使用,一定要有自己的理解看法,而不是生搬硬套书和视频当中的看法.
谦虚,好学,内敛,成熟
学习态度,一定要是主动学习,主动延伸,而不是被动学习.
我会主动的去使用百度学习我每一个不懂的知识点.
例如 :
Apache 配置这个知识点,我就会去搜索 "Apache配置" 以及 "httpd.conf配置".
MySQL 数据库这个知识点,我就会去搜索 "MySQL开发"关键词.
百度学习的效率如何提高,主要是在关键词的搜索上,当你学习一方面的知识时,例如HTML知识,你就搜索"HTML开发" +"空格"+"你想搜索的知识点".例如Javascript开发 "JS开发"+"空格"+"XXX效果实现".重点关注简书、CSDN、github、Stackoverflow等网站的结果,而不是局限于百度知道,百度百科等.
知识很多,网络上资源也有很多,你不学永远是0.
量虽然很大,但请一点点进行学习,循序渐进~
全栈开发这里想说一下个人观点,有很多人说:"全栈全栈,全都懂点,全都不精,全都不会."
这个观点,我不否定,但我不认同,我投入全栈的学习,有我自己的目的,那么我为什么要和那些全都不精的人在一个圈子里.不是因为学的多,就一定学不会,那请问大神也都是什么都会啊.请不要因为别人否定自己,否则你就已经输了.
本文涉及的知识点也不是绝对的全栈,算是全栈入门,全栈水平也有高低,请勿学前自满.
友情链接
在进行全栈学习之前,我在小专栏认识到了钢哥-Keegen小钢.
进阶全栈之路--小专栏
Keegen小钢个人博客
根据他的文章,我找到了适合自己的学习方法.钢哥注重的是全栈的思想和学习方法.跟随钢哥的脚步,进行全栈的学习.
在学习全栈的过程中,认识到了一个比我更加努力并且爱分享的程序员.
Java3y的简书主页
Java3y的个人博客
因为本人正依照本文路线进行实践(后端开发主要为PHP).
如果有想学习Java开发的同学,可以点击上面Java3y同学的主页一起学哦.
进行下面的学习时,请先确定自己学全栈的目的和动力.
下文主要分为两部分,学习路线部分主要罗列出每一个全栈涉及的知识点.
在进行学习路线学习时,会遇到很多自己不懂陌生知识点,请你毫不吝啬的使用百度吧~
用JS-SDK技术做分享、拍照、支付、登录等功能。
微信框架
小程序界面设计
API接口设计
小程序数据绑定
小程序性能优化与实践
小程序入门概念及演示
小程序开发工具介绍与创建quick_start项目
小程序文件结构
wxml
wxss
常用组件(view,image,text,navigator,swiper等)
小程序常用api
微信公众平台概述
微信开发前期准备
微信6大接收接口
微信6大回复接口
微信LBS接口开发
微信机器人开发
响应式设计
微擎/EasyWechat
微信综合案例
Swoole概述
Server
Client
Process
AsyncIO
Memory
HttpServer
WebSocket
PHP+Swoole聊天室
Docker概述
为什么需要Docker
Docker环境开发流程
Docker安装与配置
Docker指令
DockerFile应用服务器
webpack
vue-cli
vuex
打包发布
组件开发
权限管理
外部接口调用
后端渲染页面，使用会话技术实现登录，PHP操作MySQL数据库，开发接口，使用AJAX技术，模板引擎ArtTemplate完成页面功能的实现
mui框架使用
前端校验插件
echarts数据可视化
Ajax进度条组件
模板引擎渲染
图片上传插件
快速入门
虚拟DOM
交互与动态UI
数据渲染
JSX 语法
组件开发
组件复用
生命周期
React操作dom元素
React绝对路由
webpack和gulp集成构建项目
flux
redux
state props context 等
附加模块
集成工具
重定向组件
代理方式进行跨域
按需加载
单页应用
MVC
常用指令
双向绑定和单向绑定
模块
控制器controller
$watch
自定义指令
jqLite
过滤器
数据过滤
服务$http $location
前端路由
http拦截器
Express 简介
安装
请求与响应
路由
静态文件
文件上传
cookiet管理
NodeJS历史
发展
特征与现状
ES6常用语法
同步与异步
环境安装
文件操作
网络操作
模块化思想及操作
npm
异步编程
Express
工具模块
Web模块
全局对象
AMD
CMD
模块化开发基本概念
模块化演变过程分析
设计规范
RequireJS
淘宝的SeaJS
移动端屏幕介绍
移动端浏览器介绍
移动端操作系统介绍
Chrome模拟调试
真机调试
Viewport
rem
触屏touch事件
手势封装
媒体查询,设备尺寸划分
主流响应式布局框架
移动端框架
bootstrap
iScroll
swiper
fastclick
zepto
framework7
Canvas
Sass
vw
CSS预处理器LESS
canvas概述
绘图
echarts
svg
svg图标的使用
前端界面开发
Laravel后台程序设计
Socket编程
Redis集群
ffmpeg转码
VOD点播
CDN加速
HLS技术
在线教育平台实战
Laravel概述
Laravel的安装
目录分析
控制器
路由
视图
HTTP请求与响应
数据库
模型
Laravel实用项
Redis数据库
消息队列
页面静态化技术简介
真静态
伪静态
Sphinx概述
安装Sphinx
使用PHP+API接口连接Sphinx
Sphinx的匹配模式
Sphinx增量索引
主从服务器的讲解
主从复制
读写分离实战
MySQL优化概述
MySQL存储引擎
列类型的选择
数据库设计三范式与逆范式
执行计划
索引
分库分表技术
MongoDB概述
MongoDB进阶
MongoDB的权限机制
使用PHP操作MongoDB
Redis概述
Redis支持的数据类型
持久化功能
Redis主从模式
PHP操作Redis
消息队列
商城系统缓存设计与秒杀实现
大型项目优化概述
Memcache软件的安装
Memcache指令详解
使用PHP操作Memcache
Memcache应用场景
Nginx概述
LNMP的安装与配置
缓存设置
压缩设置
负载均衡
Linux系统概述
VMware虚拟机的安装
CentOS系统安装
Shell指令
VI编辑器
Linux内核分析
用户和组
文件操作
网络配置
FTP
LAMP部署
命令行
git的基本使用
对比文件差异、还原、合并 ，回滚操作
远端仓库操作,使用github创建远端仓库，生成ssh key 并添加到github
MVC
MVVM
WEB程序的访问流程
Apache
MySQL
PHP
配置虚拟主机
Vue概述
Vue指令
Vue属性
方法、事件、过滤器、事件处理、钩子函数
组件、动画、路由、API请求
常用系统指令
数据绑定
指令
过滤器
生命周期
组件化
Vue组件
Vue过渡效果(动画)
路由(vue-router库）
axios
Ajax概述
Ajax对象
GET与POST请求
同步与异步概念
缓存问题
Ajax与XML
Ajax与JSON
封装Ajax框架
跨域请求
原生Ajax
jQuery的Ajax相关API使用
低层原理分析
缓存问题及处理方式
跨域请求及解决方法
实用案例
HTTP协议概念
HTTP协议的特点
HTTP协议的分类
HTTP请求
HTTP响应
HTTP状态码
PHP模拟HTTP请求
扩展：HTTPS协议
BOM操作
DOM操作
事件处理
浏览器兼容性处理
页面动态效果
动画
搭建环境
PHP7基础
MySQL数据库
MySQL优化
表单传值
MySQLi扩展
文件编程
会话技术
GD图像处理
面向对象
PDO扩展
Smarty
ThinkPHP5.0
RESTful
MVC设计模式
博客项目
数据表设计、后台设计、前台设计、会员设计、购物车设计、订单设计、接口设计（微信/支付宝、短信、QQ登录、邮件、地图、物流）、静态化
PHP+Swoole多进程爬虫
PHP简介
WEB程序的访问流程
安装Apache
MySQL
PHP7
配置虚拟主机
变量和常量
数据类型
运算符
流程控制
函数
字符串
数组
PSR规范
B/S结构
参数传递GET/POST
动态网站
后台接口开发
分支循环语句
MySQL简介
基础SQL操作
字符集
列类型
类属性
表关系
高级查询
外键
范式
用户管理
权限管理
数据备份与还原
MySQL优化概述
MySQL存储引擎
列类型的选择
数据库设计三范式与逆范式
MySQL中的执行计划
数据库中索引的设计
MySQL中的其他功能
MySQL分表技术
Sphinx
读写分离
表单传值的方式
PHP接收数据的三种方式
PHP处理复选框数据
文件上传
基本操作
执行增删改操作
执行查询操作
与MySQLi相关的函数
MySQLi扩展应用案例
文件操作的分类
目录操作
文件操作
文件下载
会话技术概述
cookie与Session的区别
cookie原理
cookie操作
Session原理
Session操作
垃圾回收机制
GD库概述
GD画布实现
验证码
缩略图
水印图
面向对象概述
面向对象实现
封装
继承
多态
对象遍历
对象序列化
反射机制
命名空间
Trait新特性
PDO简介
PDO类
PDOStatement类
PDO预处理
PDO事务处理
PDO异常处理
PDO属性
封装PDO类
Smarty概述
模板设计
程序设计
ThinkPHP5框架概述
基础
架构
路由
控制器
视图
模型
项目实用项
RESTful概述
HTTP协议
RESTful API设计六要素
编写API接口文档
使用Lumen实现RESTful
MVC设计模式
搭建自定义MVC框架
项目开发流程
数据表数据
后台实现
前台实现
扩展功能
Swoole概述
Server
Client
Process
AsyncIO
Memory
HttpServer
WebSocket
Swoole综合案例：PHP+Swoole多进程爬虫
Javascript
jQuery
原型
原型链
继承
闭包
ES5
ES6
递归与预解析
数据类型
函数
词法分析
作用域链
事件编程
canvas绘图
面向对象
JSON对象
原型链
设计模式
正则表达式
Javascript概述
数据类型
流程控制
算法基础
企业编程规范
Javascript内置对象常用方法
对象的创建方式
Javascript中的对象
面向对象
原型
作用域链
函数的调用方式及this指向
正则表达式
Javascript高级
Javascript原理探究
jQuery简介
jQuery的优势
jQuery选择器
jQuery中的动画
jQuery插件
jQueryUI
jQuery编程思想
链式编程和隐式迭代
编写jQuery插件
jQuery选择器
属性操作
事件编程
jQuery特效
文档处理
插件机制
jQuery中的Ajax
开源jQuery项目实践
HTML5新增标签
HTML5多媒体
HTML5音频播放
HTML5视频播放
HTML5DOM扩展
HTMl5自定义属性
地理定位
文件读取
元素拖拽
应用缓存
历史管理
web存储
CSS3选择器
CSS3新属性
2D转换与过渡
3D转换
动画
Web字体
Flex弹性布局
HTML简介
HTML标签详解
标签语义化
CSS概述
CSS属性
CSS样式的类型
CSS选择器
CSS背景
元素的显示模式
CSS伪类
字体相关属性
盒子模型
margin
padding
浮动
定位
CSS相关案例
前端开发工具
SEO
Web前端
HTML + CSS
HTML5 + CSS3
Javascript + jQuery
PHP +MySQL
Web API
HTTP/HTTPS协议
Ajax
VueJS
WAMP & MAMP & LAMP
设计模式
Git开发
Linux操作系统
Nginx服务器集群
Memcache缓存设计
Redis 缓存消息队列
MongoDB (NoSQL数据库)
网站优化(MySQL高级优化)
网站优化(Sphinx,Xunsearch)
网站优化(主从复制,读写分离)
网站优化(页面静态化)
Laravel框架
Laravel +VueJS 在线直播平台
Canvas绘图
移动Web开发(响应式设计)
前端模块化
NodeJS详解
Express框架
AngularJS实战开发
ReactJS实战开发
移动端项目 (全栈必备)
后台项目 (全栈必备)
vue项目 (全栈必备)
微服务Docker (PHP进阶)
Swoole聊天室 (PHP进阶)
微信开发（微擎/ EasyWechat）
微信小程序 (前端进阶)
微信公众号 (前端进阶)
知识拓展
这里是在进行全栈涉及知识点时,我本人进行百度到的各种知识拓展,方便大家学习
Java基础
面向对象
异常
集合
I/O
多线程
网络编程
反射
XML
注解及动态代理
Mysql及JDBC开发
前端技术
javaWeb核心
ajax应用
linux和redis
javaWeb应用
框架
综合项目技能
分布式事物
分布式查询
微服务
高并发
容灾
容器化
阅读 Head First Java
掌握DOS系统常用基本命令
匿名对象
继承
多态
抽象类
接口
内部类
异常概述
异常分类
异常处理方案
自定义异常
Collection接口下的常用集合
Map接口下的常用集合
泛型
Iterator接口
文件
字节流
字节缓冲流
转换流
序列化流
多线程运行原理
多线程的实现方案
线程生命周期
线程同步
线程池
网络编程三要素
Socket原理机制
UDP传输
TCP传输
类加载机制原理
反射构造方法、字段、方法
Properties配置文件
XML基本语法
XML的约束
XML的解析
BeanUtils的使用
注解的使用
自定义注解
动态代理Proxy
类加载器
MySQL数据库
JDBC开发
连接池
DBUtils
JDBC事物管理
html
css
js
jQuery
BootStrap
Tomcat
Servlet
Request和Response
cookie和Session
jsp , el , jstl
Filter
Listener
ajax
jQuery ajax
EasyUI
Linux
Redis
通用baseServlet抽取
缓存技术
JavaMail
在线支付
文件上传
Linux项目部署
能够完成B/S结构网站开发，具备了真实环境的项目部署能力，能够完成中小型企业管理系统等传统项目的开发。
什么是全文检索
Lucene实现全文检索
Analyzer分析器
索引维护
solr安装配置
solr索引、solr搜索、SolrJ
springmvc框架原理
springmvc入门案例
springmvc整合mybatis
参数绑定
json数据交互
拦截器
mybatis框架原理
mybatis入门案例
mybatis开发DAO方式
mybatis输入输出映射
动态sql
spring整合mybatis
maven介绍
maven安装
maven的入门程序
maven仓库
项目构建
依赖管理
maven综合案例
maven的私服
简单查询
oracle的常用函数
多表查询
集合操作
DDL操作管理表
DML管理数据
其它数据库对象
PL/SQL编程
存储过程与存储函数
触发器
使用struts2+spring4+hibernate5 +svn来开发项目
使用Jquery EasyUI进行布局
使用svn进行代码管理
applicationContext.xml配置文件编写
IoC思想、DI依赖注入
使用AspectJ切面编程
JdbcTemplate模板使用
声明式事务管理
SSH整合
struts.xml详解及使用
使用通配符定义action、动态方法调用
ActionContext及ServletActionContext使用
模型驱动ModelDriven、属性驱动.
默认拦截器分析、自定义拦截器
OGNL表达式、值栈ValueStack分析
hibernate.cfg.xml配置
hbm.xml映射文件详解
PO对象状态及状态的转换分析
Hibernate高级映射技术
Hibernate数据检索技术
Hibernate性能优化技术
Hibernate5
Struts2
Spring
CRM项目
oracle
maven
mybatis框架
springmvc框架
Lucene、solr框架
掌握Apache poi实现数据导入导出；
掌握图形报表的生成技术，如JfreeChart、HighChart、AmChart
掌握Apache Shiro技术
掌握BRAC认证模型，有效进行用户权限管理
SSH框架整合
使用maven进行项目的分模块开发
页面布局采用前端主流jQuery插件easyui
采用Redis实现缓存机制
采用Oracle数据库
引入WebService的CXF开发方式，并与Spring结合
采用了BRAC认证模型，有效进行用户权限管理，同时加入当前流行的Shiro安全框架，从而高效快捷保证系统安全可靠
加入了Quartz与spring整合实现定时任务调度
引入JavaMail邮件机制，并实现Spring与JavaMail整合开发
使用PowerDesigner建立企业级PDM模型
SSM框架整合
jsp+easyui视图层展现
KindEditor富文本编辑器应用
Freemarker模板引擎实现页面静态化
Dubbo分布式调用技术
Nginx反向代理
Redis缓存
Lucene/Solr全文检索解决方案
FastDFS图片服务器
ActivieMQ消息队列
maven项目管理
svn/git实现项目代码和文档管理
zookeeper分布式协调服务
mycat中间件
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
在Laravel中已经具有了一套高级的PHP ActiveRecord实现 -- Eloquent ORM。它能方便的将“约束（constraints）”应用到关系的双方，这样你就具有了对数据的完全控制，而且享受到ActiveRecord的所有便利。Eloquent原生支持Fluent中查询构造器（query-builder）的所有方法。SEO
Sitemap（站点地图）
页面静态内容生成
MicroData / MicroFormat
内部链接建设
SEO（Search Engine Optimization）:汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO的目的理解是：为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益；SEO包含站外SEO和站内SEO两方面；SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为；使网站更适合搜索引擎的索引原则又被称为对搜索引擎优化，对搜索引擎优化不仅能够提高SEO的效果，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式，就是XML 文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站。
静态页面，即静态网页，是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面，如果想更新网页内容，要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）。常见的静态页面举例：.html扩展名的、.htm扩展名的。
微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其他的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其他形式重复使用或组合。
Microdata 以自定义的词汇表（vocabulary）为中心，可以想象 HTML5 中所有的元素集合为一个词汇表，这个词汇表包含描述段落（section） 或文章（article）的元素，但是不包含描述事件（event） 或组织（organization）的元素。如果想在 Web 页面中表示一个事件或组织，则需要定义自己的词汇表，Microdata 允许你这么做，任何人都可以定义自己的词汇表，并且将其包含在自己的 Web 页面中。
MicroData
MicroFormat
可用性
性能测试（特别是移动Web
加载优化（如gzip压缩、缓存等等
PageSpeed / Yslow 优化
压缩（如Minify、Uglify、CleanCSS等等）
Page Speed最 初是Google内部使用的改进网页设计的工具——它整合在Firefox的著名插件Firebug中。当用户运行Page Speed，可以立即获得如何改进网页载入速度的建议。
CleanCSS是一个免费的CSS精简压缩工具，通过这个在线工具，可以将你的CSS文件压缩、优化成更精简，这将大大提高你的网站的载入速度。
正规表达式由一个或多个字符型文字和/或元字符组成。在最简单的格式下，正规表达式仅由字符文字组成，如正规表达式 cat。它被读作字母 c，接着是字母 a 和 t，这种模式匹配 cat、location 和 catalog 之类的字符串。可以用它们验证数据、识别重复关键字的出现、检测不必要的空格、分析字符串、验证电话号码、邮政编码、电子邮件地址、社会安全号码、IP 地址、文件名和路径名等的格式，也可以查找如 HTML 标记、数字、日期之类的模式，或任意文本数据中符合任意模式的任何事物，并用其它的模式来替换它们。
跨浏览器测试 （Chrome，IE，Firefox，Safari等等）
跨平台测试（Windows、GNU/Linux，Mac OS等等）
跨设备测试（Desktop，Android，iOS，Windows Phone）
跨版本测试（同一个浏览器的不同版本）
CSS / CSS3 动画
能封装业务组件和公用组件.
Javascript 动画
Web字体嵌入
Icon 字体
图形和图表
CSS / SVG Sprite（如glue）
DOM操作（如jQuery、React等等）
模板引擎（如JSX、Handlebars、JSP、Mustache等等）
调试
版本管理（如git、svn）
PHP页面跳转、端口监听
依赖管理
包管理（如npm、bower）
模块化（如CommonJS、WebPack）
自动构建（脚本）
前端工程化开发测试 打包 发布
前端性能优化.
在技术选型上,能给出你选择的方案是最优的数据说明
Handlebars 是 Javascript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。
JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计的显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。 JSP(JavaServer Pages)是一种动态页面技术，它的主要目的是将表示逻辑从Servlet中分离出来。
JSX是阵营的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言，一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。
JSX
JSP
Handlebars
浏览器调试
Debug工具
Wireshark / Charles抓包
远程设备调试（如Chrome Inspect Devices）
单元测试
服务测试
UI测试
集成测试
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到Javascript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，Typescript等），并将其转换和打包为合适的格式供浏览器使用。
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的Javascript文件。
CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标 准库。这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的Javascript解释器和不同的主机环境中。在兼容CommonJS的系统中，你可以使用 Javascript程序开发
commonJS
WebPack
Grunt和Gulp的工作流程
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的Javascript文件。WeX5遵循Apache开源协议，完全开源免费，上百个组件框架，全部开放，可视化的组件框架，开发者可自定义组件，集成第三方组件，采用MVC设计模式，数据和视图分离，页面描述和代码逻辑分离，支持浏览器调试、真机调试、原生调试，等多种调试模式，开发者可掌握每一行代码。
WeX5一直坚持采用H5+CSS3+JS标准技术，一次开发，多端任意部署，确保开发者成果始终通用、不受限制。WeX5的混合应用开发模式能轻松调用手机设备，如相机、地图、通讯录等，让开发者轻松应对各类复杂数据应用，代码量减少80%。同时开发出的应用能够媲美原生的运行体验。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、Javascript 的，它简洁灵活，使得 Web 开发更加快捷。 [1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
在2017年8月下旬，Bootstrap四周岁之际，Bootstrap团队发布了Bootstrap 4 alpha版，4的最主要变化包括以下方面：
从 Less 迁移到 Sass改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 HTML resets 到一个新的模块中：Reboot 全新自定义选项 不再支持 IE8 重写所有的 Javascript 插件 改进工具提示和 popovers 的自动定位 改进文档 其他大量改进
Node.js Javascript运行环境(runtime)
jQuery JS框架
React (Facebook内部项目)
AngularJS
Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。
V8引擎执行Javascript的速度非常快，性能非常好。 [1] Node.js是一个基于Chrome Javascript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。jQuery是一个快速、简洁的Javascript框架，是继Prototype之后又一个优秀的Javascript代码库（或Javascript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装Javascript常用的功能代码，提供一种简便的Javascript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 Javascript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
AngularJS [1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 Javascript框架。它是一个以 Javascript 编写的库。它可通过