真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

一、前面bb两句

因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉。想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈。好了,可以停止bb了,说一下干货。

二、 这个项目能学到啥?

为了减少秒关文章的冲动。我得把好话放在前头。做了这个项目，我学会了….(对于我).
1. Webpack的配置以及各个参数概念都有一定的熟悉。
2. React+Webpack+Express的配合使用
3. 熟悉React的JSX语法、生命周期等的熟悉
4. Socket.io(入门)
5. localStorage(入门)
6. less(入门)
  
以上的都或多或少地涉及了(大神请别见笑)。不知道有没有和我一样的小伙伴以前看到socket、localStroage之类的都只懂个概念,真正使用还真没个数。没有吗？好吧。其实这几个东西写起来真的不难，和他高大上的概念并不成比例。  
例如socket.io只需要20行代码就能完成基本功能  
localStroage也需要创建一个对象,一个方法即可完成。  
所以无需惧怕！继续看下去

三、 项目涉及的技术及地位

1. Webpack   地位:★ ★ ★ ★ ★  
       * 原因: 因为项目最初构建目的是一步步熟悉Webpack的配置,以及和React、node的搭配,所以不给满星Webpack怕是会闹别扭。

       * 内容: 基础知识的配置(入口文件等等),loader的配置(react加载器等)，配置热更新，打包后自动生成html文件…
       
       * 扩展: 如果想要先熟悉了解webpack的一些基础知识,可以参考入门及配置Webpack
       

2. Express(node)    地位:★ ★ ★ ★ ☆
       * 原因: 虽然同样是不可或缺的地位,没开启服务怎么访问呀！但是之所以低Webpack一等(仅仅指在这个项目),是因为对node的配置不多,大部分都是通过express自动生成的。在此项目,更改的就只有app.js渲染的文件类型(默认是jade,更改为html)还有指向文件。
       * 内容: 渲染文件类型、更改指向目录、更改端口…
       * 扩展：确保安装了express,然后通过$ express  myappName初始化构建项目即可

3. React    地位:★ ★ ★ ★ ☆
       * 原因: 你说不用react也可以构建聊天室?当然可以,但是我们项目毕竟是React+Webpack,不用react的话…挺尴尬的？所以项目也要求你要懂一些react的语法啦。掌握一些基础知识即可:自定义组件、父子传值之类…
       * 内容: 页面内容的呈现、逻辑的处理(其实就是普通html、js)
       * 扩展: 基础.没…没啥好扩展的啦(项目一开始用到了react-redux,但是后面发现没什么必要就去掉了)

4. socket.io、localStroage、Less    地位:★ ★ ★ ☆ ☆
       * 原因：把这三类归在一起，一来是因为我对三类都不太熟悉(所以跟我一样的不用怕！不会很复杂)
       * 内容: socket.io负责接收某位客户端传来的信息,并广播到所有客户端上。  
       localStroage的加入有点勉强,我只是顺便想熟悉一下它,并尝试保存聊天记录。具体作用是通过localStroage获取用户信息,如果没有则添加。但是我在最开始会清除掉localStroage,所以每次刷新页面的时候都需要重新填写,所以项目localStroage存在作用不大,只是代替了模拟数据。  
       项目使用的Less也比较基础,只是简化了层级关系的写法(这一点确实比css方便很多)
       * 扩展: socket.io用法可看:socket.io中文文档  
           localStroage用法可看:这篇博客

    * Socket.io将Websocket和轮询(polling)机制以及其他痛通信方式封装成通用接口,解决了浏览器的兼容性

四、摩拳擦掌:准备项目前期

1. 我们先来看一下项目部分截图:    
          
      
      
        
       想看gif动图的可以直接跳下去哦  
       是不是很想亲自做一个出来?别急,我们这就开始。打开VSCode,打开音乐！！
2.  因为项目是通过edxpress初始化的,所以需要安装express,可通过express –version检查自己的版本确保安装(我的版本是4.16.0)。如果未安装,可执行:$ npm install express -g

express SoyChat //创建express项目,名字个人喜欢

cd SoyChat      //进入目录

npm install     //安装依赖

node bin/www    //启动项目

访问localhost:3000 看到Welcome to Express的话恭喜你！闯过第一关！

注意:启动命令也可以用npm run start 启动,因为package.json的script里面已经默认设置了npm run start指代 node ./bin/www命令。两个使用其中一个都可以启动项目！ 如果遇到端口占用情况,进入bin/www文件修改端口即可。

3.就知道这点难不倒你。开始动手写项目前我把最终目录写一下,方便后面参考使用。(可跳过)

SoyChat /
    bin/
        www         //默认生成文件,服务启动文件
        
    client/         //客户端,编写代码的地方
        components  //公共组件
        dist        //打包后存放位置
        modules     //主要的逻辑组件
        r_routes    //react组件路由
        views       //模板文件、React渲染文件
            index.html
            
    node_modules/  
    public/         //存放图片等静态资源
    routes/         //默认生成文件,express设置路由文件
        index.js
        
    app.js          //默认生成文件,服务启动配置
    package.json  
    webpack.config.js   //webpack配置文件

4.完整项目的github地址:小语1.0  
拷贝到本地之后  

npm install     //安装依赖
npm run build   //打包
npm run start   //启动服务

浏览器访问localhost:8000,测试聊天可开多一个窗口

五、开战！编写项目

1.更改服务启动相关配置(app.js)

删除routes/文件下的user.js 去掉app.js引入的userRouter、app.use(‘/users’,userRouter)
更改视图渲染文件的类型:jade => html

var ejs = require('ejs'); //需要安装ejs模块:npm install ejs --save

app.engine('html', ejs.renderFile);
app.set('views', path.join(__dirname, './client/dist'));    //html文件加载路径
app.set('view engine', 'html');
app.use(express.static(path.join(__dirname, './client/dist'))); //css.js...之类文件加载路径

可能会疑惑./client/dist是个什么东西？  
其实这个文件是我们打包后存放的位置,我们不直接访问React渲染的html页面,而是指向webpack打包后生成的html;
例如,这个项目最终打包好后的dist文件如下:  

好了,node服务我们配置到这就完事了.啥？真的就这么简单。

2.高能预警:Webpack的配置(敲桌子!)

安装Webpack依赖:npm install webpack –save-dev

这里的–save-dev是把依赖加载到package.json的devDependencies中,–save是安装到dependencies中。前者是开发所需要用到的,后者是生产环境需要用到的。这里不做具体介绍,可看《入门及配置Webpack》

呼～终于安装好了。接着新建一个webpack.config.js文件吧。

//webpack.config.js
var webpack = require('webpack');
var path = require('path');
const HtmlWebpackPl