共计 1132 个字符，预计需要花费 3 分钟才能阅读完成。
修复前面版本的一些问题
在前面 2 - 5 分支中，运行后控制台总会出现一些错误。原因就是 client 目录下 app.js 和 App.jsx 的文件名相似引起的。因此我们将 app.js 重新命名为 main.js，然后修改客户端 webpack 的入口文件为 main.js 即可。
webpack-dev-server 的作用
前面都是 buil 命令，直接在硬盘上生成打包好的文件。而我们在开发过程中，往往会在本地启动一个服务器，webpack-dev-server 就是帮助我们启动一个本地的服务器。本届主要时配置 webpack 的 devServer 属性，感兴趣的可以先去看看官方文档。
本节内容需要安装两个开发环境的依赖。
webpack-dev-server 启动本地服务器
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 分支
