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

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

  • Iframe mode
  • inline mode

一、 iframe mode

特点

  1. 在网页中嵌入了一个iframe,将我们自己的应用注入到这个iframe当中去。
  2. 在页面头部有一个提示框,用于显示构建过程的状态信息。
  3. 加载了live.bundle.js文件,其不但创建了iframe标签,同时包含socket.ioclient代码,以和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.ioclient代码,这样它就能和webpack-dev-server建立的http server进行websocket通讯了。并根据返回的信息完成相应的动作。

二、inline mode

特点

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

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

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

总结

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

相关推荐