深入淺析devServer配置實現即時編譯問題

這篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於devServer配置實現實時編譯的相關問題，webpack-dev-server主要是啟動了一個使用express的Http伺服器，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

每次改完程式碼都需要重新打包一次，打開瀏覽器，刷新一次，很麻煩

我們可以安裝使用webpackdevserver來改善這塊的體驗

webpack-dev-server主要是啟動了一個使用express的Http伺服器。它的作用主要是用來伺服資源檔案。另外這個Http伺服器和client使用了websocket通訊協議，原始檔案作出改動後，webpack-dev-server會即時的編譯，但是最後的編譯的檔案並沒有輸出到目標資料夾，也就是下面原本我們output中的配置:是打包後要產生dist資料夾的，但用dev-server並沒有產生dist目錄

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

啟動服務後，會發現dist目錄沒有了，這是因為devServer把打包後的模組不會放在dist目錄下，而是放到記憶體中，從而提升速度

安裝：npm install webpack-dev-server -D

修改下package.json：

 那麼以後就可以執行npm run server即可啟動我們的服務

在webpack.config.js設定：

跨域：聯調期間，前後端分離，直接取得資料會跨域，上線後我們使用nginx轉發，開發期間，webpack就可以搞定這件事

應用場景：我們在自己用express造了介面和數據，我們存取這些介面時候會造成跨域問題，之前都是在server.js中去設定回應頭的形式去允許跨域。但是現在可以用devServer的代理也可以。

1.準備node服務，在專案根目錄建立server.js，以express建立服務為例：

2.webpack.config,js檔案中設定devServer:

# 3..安裝axios,並在入口檔案index.js中引入，用axios去請求介面資料

 前台瀏覽器拿到結果：

# 前台瀏覽器拿到結果：

##Hot Module Replacement (HMR:熱模組替換) 是webpack自帶的一個模組，不需要額外安裝

##配置hmr：

1）設定文件webpack.config.js頭部引入webpack

const webpack = require("webpack");

2)在外掛程式設定處新增：

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

3)啟動hmr

##以上設定對js熱更新不起作用，儲存時候還是會重新整理頁面才會起到更新效果：

我們有兩個b.js和a.js檔案

b.js中return 1

 a.js中引入b.js ，並在頁面中寫入資料b的執行結果一個數字

在入口檔index.js中，引入a，運行npm run server（我們的熱更新配置還是保留之前的不變）

然後我們開啟頁面，更改a.js中的b() 1000的值，然後ctrl s 儲存，發現頁面刷新後才能更新值。這顯然不是我們想要看到的，對於js的熱更新我們需要在入口檔案中監聽要執行的檔案：

####在更改a.js中的值後來儲存，不用重新整理頁面，值也會運算為最新值顯示在頁面中#############

 總結：HMR預設對css熱更新支援教好，對於js需要單獨的監聽才可以

【相關推薦：javascript影片教學、web前端】

以上是深入淺析devServer配置實現即時編譯問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！