webpack-dev-server的刷新模式inline和iframe详解

konghouy

2019-06-27

关注关注

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

Iframe mode
inline mode

一、 iframe mode

特点

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

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

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

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

webpack-dev-server的刷新模式inline和iframe详解

原理

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

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
        <script type="text/javascript" charset="utf-8" src="/__webpack_dev_server__/live.bundle.js"></script>
    </head>
    <body></body>
</html>

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

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

二、inline mode

特点

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

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

localhost:8080/index.html

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

webpack-dev-server的刷新模式inline和iframe详解

原理

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引入这部分代码:

<script src="http://localhost:8080/webpack-dev-server.js"></script>

总结

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

iframe webpack-dev-server inline bundle