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

更新時間：2023年02月07日 09:16:37 作者：Leadyang

這篇文章主要介紹了'webpack-dev-server'?不是內部或外部命令也不是可運行的程序?或批處理文件的最新解決方法,文中給大家補充介紹了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

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

webpack-dev-server 安裝及配置

用以下命令進行安裝：

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

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

為了便捷地啟動webpack-dev-server，我們在package.json中添加一個dev指令：

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"  //open是自動執(zhí)行后打開頁面
  }

最后，對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開發(fā)和使用webpack-dev-server有一個很大的區(qū)別，前者每次都會生成budnle.js，而webpack-dev-server只是將打包結果放在內存中，并不會寫入實際的bundle.js，在每次webpack-dev-server接收到請求時都只是將內存中的打包結果返回給瀏覽器。

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