1、简单介绍
1、上面是webpack官方的介绍图片，将我们开发项目时离散的开发资源拼凑成更适合线上项目运行时使用的静态资源，中间就是webpack的处理过程。
2、React服务端渲染是什么？使用React框架之后，我们所有的HTML内容都是通过JS在浏览器进行生成的，也就是说我们在浏览器中输入URL得到的是一个没有任何内容的HTML，要等HTML中引用的JS代码全部加载完成后才能渲染出内容，那么这里面就几个问题
（1）seo不友好，seo需要去解析URL返回的html里面的内容，现在html没有内容，所以seo抓不到任何东西。
（2）首屏时间长，用户时间差，因为加载JS比直接加载HTML的时间要长一些。
于是React服务端渲染就出现了！
3、我们这个博客要学习的就是webpack配置，node服务，服务端渲染的基础，React，React-Router，Mobx，服务端渲染优化，PM2,Nginx反向代理。一键部署，最后是React+React-Router+Mobx的架构模式
2、前端技术选型
1、传统的多页网站不太会选择React去作为前端框架，单页应用使用jquery也会变的十分困难，不同的项目适合不同的技术栈。
2、怎么区分不同的技术栈？两大分类：单页应用和多页应用（链接跳转）
（1）多页应用的特征：内容都是由服务端用模板生成，java的JSP就是去实现这样的技术。每次的页面跳转都要经过服务端。JS做的更多的只是动画。
（2）传统多页应用常用类库（DOM操作的封装）：jQuery。mootools。yui。
（3）传统多页应用无特定前端工具，跟后端配合。后来有了grunt（注册任务的脚本管理器）和gulp。
（4）传统多页应用的模块化工具，从最开始的没有到后来的seajs（国内）和requirejs（国外）。
（5）传统多页应用的静态文件，使用gulp或者grunt等工具去手动编译到html文件之中。
3、单页应用的特征：
（1）所有内容都在前端生成
（2）JS承担更多的业务逻辑，后端只是提供API
（3）页面路由不需要经过后端，只是获取数据本地构建UI，然后结合显示新的东西。
（4）单页应用常用类库：React，Vue，Angular，还有很有名的BACKBONE.JS(MVC模式)
（5）单页应用的架构工具：npm，bower，jspm。
（6）单页应用的模块化工具：webpack，rollup，browserify。(有些公司开发使用webpack，上线打包使用rollup)
3、WebApp架构简介
3.1、工程架构
（1）解放生产力：将目光聚焦在业务代码上，不用去重启服务器，到浏览器去刷新等等。比如源代码预处理，自动打包，自动更新页面显示，自动图片处理依赖，
（2）围绕解决方案搭建环境，React使用的JSX语法，Vue使用的.vue文件的形式，Angular使用的是Typescript的方式。
（3）保证项目质量。
2、学会定制我们的一个工程。
3、保证项目质量。
（1）codelint 制定代码规范。
（2）不同环境排除差异。
（3）editconfig来制定编辑器的规范，空格啊Tab的规范等等。
（4）git commit预处理。（有问题不改git commit也会通过，所以在git commit之前去制定检查规范。）
3.2、项目架构
1、技术选型。选择框架，市面上流行的框架，或者自己写一个也行。
2、数据解决方案：store使用redux，mobx等等。
3,、整体代码风格：比如使用mobx，但是并不是所有的数据都会放在store中，考虑哪些数据放在store中，哪些数据放在当前文件就可以了。还有目录结构，文件命名方式，变量的命名方式等等。
4、Web开发常用网络优化
1、合并资源文件，减少HTTP请求，提高页面加载数据：浏览器并发的http请求是有数量限制的，多的就会陷入等待当中。
2、压缩资源文件的大小：http请求时间和文件大小是有关系的。
3、合理的利用缓存机制，尽可能使用缓存来减少请求：浏览器是有缓存机制的，在http请求返回的时候设置catchcontrol，设置一个过期时间，在过期时间内默认使用的是浏览器缓存中的文件，这样http请求就不经过网络，相当于读取本地文件。（但是有个问题当我们的部分资源更新，或者发了新版本，那么怎么告诉浏览器我有新的文件更新了，不再让它使用缓存中上个版本的静态文件呢？现在最流行的方法就是根据你的文件内容计算出一个哈希值，如果内容变了就会导致哈希值的变化，因为浏览器引用的是文件名，判断该文件的哈希值和缓存中的哈希值是不是一样，一样就继续使用缓存中的，不一样就去请求新的文件。）
4、利用webpack一下就能完成我们的浏览器缓存和JS代码压缩打包。