詳情介紹webpack-dev-server，iframe與inline的區別

阿新 • • 發佈：2019-01-12

webpack-dev-server用法

記錄下 webpack-dev-server 的用法.

首先，我們來看看基本的 webpack.config.js 的寫法

module.exports = {
        entry: './src/js/index.js',
        output: {
            path: './dist/js',
            filename: 'bundle.js'
        }
    }

配置檔案提供一個入口和一個出口， webpack 根據這個來進行 js的打包和編譯工作。雖然 webpack 提供了 webpack --watch

的命令來動態監聽檔案的改變並實時打包，輸出新 bundle.js 檔案，這樣檔案多了之後打包速度會很慢，此外這樣的打包的方式不能做到

hot
 replace

，即每次 webpack 編譯之後，你還需要手動重新整理瀏覽器。

webpack-dev-server 其中部分功能就能克服上面的2個問題。 webpack-dev-server 主要是啟動了一個使用 express 的 Http伺服器 。它的作用主要是用來伺服資原始檔。此外這個 Http伺服器 和 client 使用了 websocket 通訊協議，原始檔案作出改動後， webpack-dev-server 會實時的編譯，但是最後的編譯的檔案並沒有輸出到目標資料夾，即上面配置的:

output: {
        path: './dist/js',
        filename: 'bundle.js'
    }

注意：你啟動webpack-dev-server後，你在目標資料夾中是看不到編譯後的檔案的,實時編譯後的檔案都儲存到了記憶體當中。因此很多同學使用webpack-dev-server進行開發的時候都看不到編譯後的檔案

下面來結合 webpack 的文件和 webpack-dev-server 裡部分原始碼來說明下如何使用：

啟動

啟動 webpack-dev-server 有2種方式：

cmd line
Node.js API

配置

我主要講解下 cmd line

的形式,

Node.js
 API

形式大家去看下官方文件。可通過 npm script 進行啟動。我的目錄結構是:

app
    |__dist
    |   |__styles
    |   |__js
    |       |__bundle.js
    |   |__index.html
    |__src
    |   |__styles
    |   |__js
    |       |__index.js
    |__node_modules
    |__package.json
    |__webpack.config.js

content-base

設定 webpack-dev-server 伺服的 directory 。如果不進行設定的話，預設是在當前目錄下。

webpack-dev-server --content-base ./dist

這個時候還要注意的一點就是在 webpack.config.js 檔案裡面，如果配置了 output 的 publicPath 這個欄位的值的話，在 index.html 檔案裡面也應該做出調整。因為 webpack-dev-server 伺服的檔案是相對 publicPath 這個路徑的。因此，如果你的 webpack.config.js 配置成這樣的：

module.exports = {
        entry: './src/js/index.js',
        output: {
            path: './dist/js',
            filename: 'bundle.js'，
            publicPath: '/assets/'
        }
    }

那麼，在 index.html 檔案當中引入的路徑也發生相應的變化:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <script src="assets/bundle.js"></script>
    </body>
    </html>

如果在 webpack.config.js 裡面沒有配置 output 的 publicPath 的話，那麼index.html 最後引入的檔案 js檔案 路徑應該是下面這樣的。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
    </html>

Automatic Refresh

webpack-dev-server 支援2種自動重新整理的方式：

Iframe mode
inline mode

這2種模式配置的方式和訪問的路徑稍微有點區別，最主要的區別還是 Iframe mode 是在網頁中嵌入了一個 iframe ，將我們自己的應用注入到這個 iframe 當中去，因此每次你修改的檔案後，都是這個 iframe 進行了 reload 。

通過檢視 webpack-dev-server 的原始碼， lib 路徑下的 Server.js 檔案，第38-48行，分別新建幾個流，這幾個流儲存了 client 資料夾下的相關檔案：

// Prepare live html page
    var livePage = this.livePage = new StreamCache();
    fs.createReadStream(path.join(__dirname, "..", "client", "live.html")).pipe(livePage);

    // Prepare the live js file
    var liveJs = new StreamCache();
    fs.createReadStream(path.join(__dirname, "..", "client", "live.bundle.js")).pipe(liveJs);

    // Prepare the inlined js file
    var inlinedJs = new StreamCache();
    fs.createReadStream(path.join(__dirname, "..", "client", "index.bundle.js")).pipe(inlinedJs);

// Init express server
    var app = this.app = new express();

    // middleware for serving webpack bundle
    this.middleware = webpackDevMiddleware(compiler, options);

    app.get("/__webpack_dev_server__/live.bundle.js", function(req, res) {
        res.setHeader("Content-Type", "application/javascript");
        liveJs.pipe(res);
    });

    app.get("/webpack-dev-server.js", function(req, res) {
        res.setHeader("Content-Type", "application/javascript");
        inlinedJs.pipe(res);
    });

    app.get("/webpack-dev-server/*", function(req, res) {
        res.setHeader("Content-Type", "text/html");
        this.livePage.pipe(res);
    }.bind(this));

當使用 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 ，是 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'
        }
    }

這樣就完成了將 inlinedJS 打包進 bundle.js 裡的功能，同時 inlinedJS 裡面也包含了 socket.io 的 client 程式碼，可以和 webpack-dev-server 進行 websocket 通訊。

當然你也可以直接在你 index.html 引入這部分程式碼:

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

不過 Iframe mode 和 Inline mode 最後達到的效果都是一樣的，都是監聽檔案的變化，然後再將編譯後的檔案推送到前端，完成頁面的 reload 的。

Iframe mode

Iframe mode 下 cmd line 不需要新增其他的內容，瀏覽器訪問的路徑是:

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

這個時候這個頁面的 header部分 會出現整個 reload訊息 的狀態。當時改變原始檔的時候，即可以完成自動編譯打包，頁面自動重新整理的功能。

Inline mode

使用 inline mode 的時候， cmd line 需要寫成：

webpack-dev-server --inline --content-base ./dist

這個時候訪問的路徑是:

localhost:8080/index.html

也能完成自動編譯打包，頁面自動重新整理的功能。但是沒有的 header 部分的 reload 訊息的顯示，不過在控制檯中會顯示 reload 的狀態。

Hot Module Replacement

開啟 Hot Module Replacemen t功能，在 cmd line 裡面新增 --hot

webpack-dev-server --hot --inline --content-base ./dist

其他配置選項

--quiet 控制檯中不輸出打包的資訊
--compress 開啟gzip壓縮
--progress 顯示打包的進度

還有一切其他的配置資訊可以查閱官方文件:

這是我的 package.json 的檔案：

{
  "name": "reptile",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.23.1",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1"
  }
}

首先命令列：輸入 npm install 所有依賴。然後輸入 npm run dev 。在瀏覽器中開啟localhost:8080/index.html，然後就可以愉快的開發咯。

如果對 web-dev-server 還有其他問題的話，請留言告知。

詳情介紹webpack-dev-server，iframe與inline的區別

webpack-dev-server用法

啟動

配置

content-base

Automatic Refresh

Iframe mode

Inline mode

Hot Module Replacement

其他配置選項

詳情介紹webpack-dev-server，iframe與inline的區別

webpack基礎+webpack配置文件常用配置項介紹+webpack-dev-server

[轉] webpack3最新版本配置研究（五） devtool，webpack-dev-server，CommonsChunkPlugin

webpack-dev-server原理分析與HMR實現

webpack基礎+webpack配置檔案常用配置項介紹+webpack-dev-server

用webpack-dev-server開發時代理，決解開發時跨域問題

'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序

Vue 項目： npm run dev b報錯 “'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序或批處理文件。”

Vue項目碰到"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序或批處理文件"報錯

webpack-dev-server 小記原理介紹概念解讀

vue中"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序"的報錯

webpack4 系列教程(十五)：開發模式與webpack-dev-server

webpack-dev-server啟動後，localhost:8080返回index.html的原理

解決：'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式或批處理檔案。

vue-cli 專案執行時報錯處理，'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式，更換電腦執行本地的vue-cli專案報錯處理

vue 如何新建一個專案///Vue專案碰到"‘webpack-dev-server’不是內部或外部命令，也不是可執行的程式或批處理檔案"報錯

webpack-dev-server使用方法，看完還不會的來找我~

啟動vue專案報錯：'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式

webpack和webpack-dev-server版本相容，親測有效

webstorm修改檔案，webpack-dev-server不會自動編譯重新整理

詳情介紹webpack-dev-server，iframe與inline的區別

webpack-dev-server用法

啟動

配置

content-base

Automatic Refresh

Iframe mode

Inline mode

Hot Module Replacement

其他配置選項

相關推薦