3.webpack-dev-server配置

修复前面版本的一些问题

在前面2-5分支中，运行后控制台总会出现一些错误。缘由就是client目录下app.js和App.jsx的文件名类似引发的。所以咱们将app.js从新命名为main.js，而后修改客户端webpack的入口文件为main.js便可。

webpack-dev-server的做用

前面都是buil命令，直接在硬盘上生成打包好的文件。而咱们在开发过程当中，每每会在本地启动一个服务器，webpack-dev-server就是帮助咱们启动一个本地的服务器。本届主要时配置webpack的devServer属性，感兴趣的能够先去看看官方文档。

本节内容须要安装两个开发环境的依赖。

1. webpack-dev-server 启动本地服务器
2. cross-env 判断不一样系统下的开发或生产环境

因为开发时的配置，因此主要是修改client端的配置文件。并且须要判断是否为开发环境。

const isDev = process.env.NODE_ENV === 'development'   //判断是否为开发环境

// 之前是直接 module.exports = config {}
// 如今须要在开发时增长一些配置
config = {....}   // 仍是之前的配置，省略
// 若是时开发环境，增长以下配置
if (isDev) {
  config.devServer = {
    host: '0.0.0.0', // 能够经过localhost或127.0.0.1方式访问
    port: '8888', // 端口号
    contentBase: path.join(__dirname, '../dist'), // 访问的文件目录
    // hot: true, // 热更替，后面配置react后会开启
    overlay: {
      errors: true  // 在浏览器窗口出口错误的提示层
    },
    publicPath: '/public', // 与前面的功能一致
    historyApiFallback: {
      index: '/public/index.html' // 404页面默认回到首页
    }
  }
}

module.exports = config

前面咱们在webpack中配置了mode:'development',就已经设置为开发模式了。关于mode这个属性，能够去看看官方文档。

接下来，咱们在package.json中配置scripts。

// cross-env判断不一样系统环境下的NODE_ENV的值
    "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"

注意，运行dev:client命令时，记得先删除本地编译的dist目录。

本节代码位于仓库的2-6分支