共计 1546 个字符，预计需要花费 4 分钟才能阅读完成。
这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。
前沿：webpack-dev-server 支持热更新，简单的说就是你修改代码，浏览器能够自动刷新页面。因为很久没有配置过 webpack-dev-server，搭建出效果后，我一直以为是错的，因为在我的理解上，我以为的热更新并非是刷新页面，而是更新改动的模块。要实现非刷新页面的热更新，还需要有额外的逻辑。
先看一段代码截图
webpack-dev-server 的配置。
historyApiFallback 设置为 true, 有点类似于 app.get(“*”, index)，就是一个兜底的路由，保证所有未拦截的 404 页面都转向 index。
contentBase 设置的就是 dist 目录，即 webpack 打包的 dist 目录，所以开启 webpack-dev-server 之前，必须打包一下，不然找不到 index.html 文件。
hot 设置为 true，表示启用热更新，因为我们用的是 API 方式允许 webpack-dev-server，所以配置项目中必须设置 port 和 host，否则会报错。
重点：基本配置完成后，在增加一段代码到 webpack 的 entry 里面
因为我们走的是 API，而 webpackDevServer 里面已经提供了以方法 addDevServerEntrypoints 实现。只需要传递两个配置参数即可。他的效果如图，我打印出了 webpackConfig
说白了就是手动把热更新的两个 JS 文件插入到了 entry 中，一并打包。如果我们手动写的 webpack.config.js，就应该明白这点。所以这个 API 还是很方便的。
其实走到这里就能实现页面自动刷了。but… 根据配置经验，还需要配置一个
plugins.push(new webpack.HotModuleReplacementPlugin());
but，根据我实际的测试结果，不用手动加入这个 plugin 也可以实现热更新。原因就跟我上面说的一样，API 自动加上了这个配置。我们公司的脚手架没用这个 API 结果，导致自己额外增添了很多配置。
BUT，走到这里，我们会发现只实现了第一步页面自动刷新。如果我们开发的是 react 应用就远远不够了。因为一旦项目大起来，刷新页面将会是一件非常非常耗时的事情，尤其是当涉及到服务器端渲染的时候。
要实现类似于懒更新的功能，需要引入 react-hot-loader。引入最新版本，根据文档，只需要配置两个地方即可。脚手架的 babel 配置，增加一个 plugin react-hot-loader/babel
然后在我们的项目目录中 cli-view 中包裹一层 Root.jsx
至此就能完美的实现开发环境的自动的更新了，更改代码，能够实现刷新当前更改的 module，而不是刷新整个页面。其实还有一个小小的疑问，在测试过程中，我即便不加上 react-hot-loader/babel 这个 plugin，也能够实现懒更新，只需要在项目目录中配置即可。看了下这个 plugin 的源码，没看出所以然来，我猜测这个 plugin, 是不是说懒启动的时候，保证能走一遍 babel 编译？有待大佬验证！！！。
顺便简单说下 proxy，一般而言调用后台接口都会报跨域，但设置了 proxy，类似于在 node 层做了一次服务转发。
我把原本 cli-view 目录下的 webpack.config.js 改成了 app.config.js。我把所有的配置都放在了这个文件里面。我本地启用了一个端口 8888 的服务，而我的 cli-view 的 port 是 3000，当我请求 API 后，所有的 /api 前缀的请求都转到了 8888 下。
到了这里关于 webpack-dev-server 的内容就差不多了。很细，很有意思