'webpack-dev-server' 不是內部或外部命令也不是可運行的程序 或批處理文件的最新解決方法

'webpack-dev-server' 不是內部或外部命令也不是可運行的程序 或批處理文件的最新解決方法

相信很多人在使用webpack-dev-server時肯定會遇到一些問題(如下圖所示)

我在學習vue框架的時候因為要使用到webpack工具,但這個工具又是基於node,而我對node沒有任何基礎,然後每次出現問題就在網上瘋狂的找啊找,在網上諸如類似這個問題的解答很多,但是每個人的情況不一樣,而我相信我的情況是最復雜的那種,試過網上所有辦法之後還是沒有解決,最後摸索出瞭一套自己的萬能解決辦法!

webpack-dev-server錯誤法則:

前往項目根目錄刪除node_modules文件夾,然後在項目根目錄路徑下的終端運行"npm install"等待安裝完之後,再次運行“npm run dev”,有些人的是馬上就可以瞭,然而往往還會有人(譬如我)仍然報類似的錯誤,這個時候你隻需要再次重復相同的操作即可,“一次不成再刪再安裝”!!!

補充:webpack-dev-server的介紹與用法

為什麼要用webpack-dev-server

在開發中,我們都可以發現僅僅使用Webpack以及它的命令行工具來進行開發調試的效率並不高,每次編寫好代碼之後,我們需要執行npm run build命令更新js文件,然後再刷新頁面,才能看到更新效果。webpack-dev-server正好解決瞭這個問題,是一款便捷的本地開發工具。

webpack-dev-server 安裝及配置

用以下命令進行安裝:

npm install webpack-dev-server --save-dev

–save-dev:將webpack-dev-server保存配置信息到pacjage.json的devDependencies(開發環境依賴)節點中。這樣做是因為webpack-dev-server僅僅在本地開發時才會用到,在生產環境中並不需要它 。項目上線的時候,要進行依賴安裝,就可以通過npm install–production過濾掉devDependencies中的冗餘模塊,從而加快安裝和發佈的速度。

為瞭便捷地啟動webpack-dev-server,我們在package.json中添加一個dev指令:

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"  //open是自動執行後打開頁面
  }

最後,對webpack.config.js添加一個devServer對象,它是專門用來放webpack-dev-server配置的,webpack-dev-server可以看作一個服務者,它的主要工作就是接收瀏覽器的請求,然後將資源返回。當服務啟動時,會先讓Webpack進行模塊打包並將資源準備好(在示例中就是bundle.js)。當webpack-dev-server接收到瀏覽器的資源請求時,它會首先進行URL地址校驗。如果該地址是資源服務地址(上面配置的publicPath),就會從Webpack的打包結果中尋找該資源並返回給瀏覽器。反之,如果請求地址不屬於資源服務地址,則直接讀取硬盤中的源文件並將其返回

"devServer": {
    "publicPath": './dist',
    "port": 3000
  }

這裡有一點需要註意。直接用Webpack開發和使用webpack-dev-server有一個很大的區別,前者每次都會生成budnle.js,而webpack-dev-server隻是將打包結果放在內存中,並不會寫入實際的bundle.js,在每次webpack-dev-server接收到請求時都隻是將內存中的打包結果返回給瀏覽器。

webpack-dev-server還有一項很便捷的特性就是live-reloading(自動刷新)。當我們修改瞭內容之後,切換到瀏覽器你會發現,瀏覽器內容也變化瞭。

webpack-dev-server特點:

  • 令Webpack進行模塊打包,並處理打包結果的資源請求
  • 作為普通的Web Server,處理靜態資源文件請求
  • 解決瞭來回npm run build,再更新代碼的問題,比較便捷
  • 可以設置port端口和open(自動打開頁面),其他更多配置可以參考官網api:webpack.js.org/configurati…
  • 自動刷新:瀏覽器自動更改後的內容

到此這篇關於'webpack-dev-server' 不是內部或外部命令也不是可運行的程序 或批處理文件的最新解決方法的文章就介紹到這瞭,更多相關webpack-dev-server不是內部或外部命令內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: