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

時間 2019-12-06

標籤 webpack dev server 刷新模式 inline iframe 詳解欄目 HTML 简体版

原文原文鏈接

webpack-dev-server支持2種自動刷新的方式：javascript

Iframe mode
inline mode

1、 iframe mode

特色

在網頁中嵌入了一個iframe，將咱們本身的應用注入到這個iframe當中去。
在頁面頭部有一個提示框，用於顯示構建過程的狀態信息。
加載了live.bundle.js文件，其不但建立了iframe標籤，同時包含socket.io的client代碼，以和webpack-dev-server進行websocket通信，從而完成自動編譯打包、頁面自動刷新的功能。

Iframe mode下，瀏覽器訪問的路徑是:html

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

這個時候這個頁面的header部分會出現整個reload消息的狀態。當源文件改變的時候，便可以完成自動編譯打包、頁面自動刷新的功能。前端

原理

當使用Iframe mode時，請求/webpack-dev-server/index.html路徑時，會返回client/index.html文件，這個文件的內容就是：java

<!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當中。webpack

同時live.bundle.js中含有socket.io的client代碼，這樣它就能和webpack-dev-server創建的http server進行websocket通信了。並根據返回的信息完成相應的動做。web

2、inline mode

特色

構建消息在瀏覽器控制檯顯示。
socket.io的client代碼被打包進了你的包(bundle)中，以此來與webpack-dev-server進行websocket通信，從而完成自動編譯打包、頁面自動刷新的功能。
可是，每個入口文件都會被插入上述的一段腳本，使得打包後的bundle文件很臃腫。

使用inline mode的時候，這個時候訪問的路徑是:瀏覽器

localhost:8080/index.html

Inline mode也能完成自動編譯打包、頁面自動刷新的功能，可是頁面沒有header部分的reload消息的顯示，不過在控制檯中會顯示reload的狀態。websocket

原理

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

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通信。socket

固然你也能夠直接在你index.html引入這部分代碼:

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

總結

Iframe mode和Inline mode最後達到的效果都是同樣的，都是監聽文件的變化，而後再將編譯後的文件推送到前端，完成頁面的reload的。
經過設置devServer.inline切換兩種模式，默認爲inline模式。
當使用HMR功能時，推薦使用inline mode。