3.webpackdevserver配置

修复前面版本的一些问题

在前面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:&＃8217;development&＃8217;,就已经设置为开发模式了。关于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分支