webpack-dev-server支持2种自动刷新的方式：

• Iframe mode
• inline mode

一、 iframe mode

特点

1. 在网页中嵌入了一个iframe，将我们自己的应用注入到这个iframe当中去。
2. 在页面头部有一个提示框，用于显示构建过程的状态信息。
3. 加载了live.bundle.js文件，其不但创建了iframe标签，同时包含socket.io的client代码，以和webpack-dev-server进行websocket通讯，从而完成自动编译打包、页面自动刷新的功能。

Iframe mode下，浏览器访问的路径是:

localhost:8080/webpack-dev-server/index.html。

这个时候这个页面的header部分会出现整个reload消息的状态。当源文件改变的时候，即可以完成自动编译打包、页面自动刷新的功能。

原理

当使用Iframe mode时，请求/webpack-dev-server/index.html路径时，会返回client/index.html文件，这个文件的内容就是：

可看出，这个页面会请求live.bundle.js文件,该文件里面会新建一个Iframe，你的应用就被注入到了这个Iframe当中。

同时live.bundle.js中含有socket.io的client代码，这样它就能和webpack-dev-server建立的http server进行websocket通讯了。并根据返回的信息完成相应的动作。

二、inline mode

特点

1. 构建消息在浏览器控制台显示。
2. socket.io的client代码被打包进了你的包(bundle)中，以此来与webpack-dev-server进行websocket通讯，从而完成自动编译打包、页面自动刷新的功能。
3. 但是，每一个入口文件都会被插入上述的一段脚本，使得打包后的bundle文件很臃肿。

使用inline mode的时候，这个时候访问的路径是:

localhost:8080/index.html

Inline mode也能完成自动编译打包、页面自动刷新的功能，但是页面没有header部分的reload消息的显示，不过在控制台中会显示reload的状态。

原理

Inline-mode，是webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,

module.exports = {        entry: {            app: [                'webpack-dev-server/client?http://localhost:8080/',                './src/js/index.js'            ]        },        output: {            path: './dist/js',            filename: 'bundle.js'        }    }

这样就完成了将inlined.js打包进bundle.js里的功能，同时inlined.js里面也包含了socket.io的client代码，可以和webpack-dev-server进行websocket通讯。

当然你也可以直接在你index.html引入这部分代码:

总结

1. Iframe mode和Inline mode最后达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的reload的。
2. 通过设置devServer.inline切换两种模式，默认为inline模式。
3. 当使用HMR功能时，推荐使用inline mode。