client端和server端的配置有重复的地方，优化的手段就是将两个文件中重复的配置项提取出来，然后利用webpack-merge包去合并配置。

本章节内容主要时要时参照官方文档配置即可。 eslint配置 在根项目目录项新建.eslintrc文件 {代码...} 然后在client目录下新建同样的文件，来规范client端的代码 {代码...} 在webpack客户端和服务端的配置文件中，在rules下新增一个rule。 {代码...} 配置完这些后，我们启动我们的服务。会发现出现很多错误，window环境...

由于配置了webpack-dev-server，客户端启动时，就不必再本地生成dist目录。但是服务器端的编译还是需要本地的dist目录，所以本节我们将会配置服务端的内容，使得服务端也不用依赖本地的dist目录。

按照前面的配置，更改App.jsx中的内容，保存后，页面上的内容也会实时的变化，这难道不是热更行吗？我刚开始也有这样的疑问。但是，你要注意，目前更改内容保存后，浏览器执行的是刷新操作，相当于F5刷新页面。而热更新就像ajax一样，只会更改修改的那部分，不会引起浏览器的刷新。

在前面2-5分支中，运行后控制台总会出现一些错误。原因就是client目录下app.js和App.jsx的文件名相似引起的。因此我们将app.js重新命名为main.js，然后修改客户端webpack的入口文件为main.js即可。

服务端渲染 服务端渲染（SSR）主要是为了SEO，加快首屏的加载速度等作用。利用react-dom/server提供的工具，我们很容易进行服务端渲染。 基本原理 服务端渲染的基本原理就是读取我们的模板文件，然后将其中的内容替换成我们自己的代码，然后生成一个完整的html文件返回给前端页面。 webpack配置 在第一篇文章中，已经进...

该系列文章主要是本人在学习慕课网React全栈课程中的一些记录和分享。该课程主要是利用React构建cnode网站，接口由cnode官方提供。由于课程中的webpack，babel版本较老，本次分享均是用的webpack4和Babel7。本系列文章重点不是React，主要是分享前端工程化的构建和服务端渲染（SSR）。