'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運(yùn)行的程序?或批處理文件的最新解決方法
'webpack-dev-server' 不是內(nèi)部或外部命令也不是可運(yùn)行的程序 或批處理文件的最新解決方法
相信很多人在使用webpack-dev-server時(shí)肯定會(huì)遇到一些問(wèn)題(如下圖所示)
我在學(xué)習(xí)vue框架的時(shí)候因?yàn)橐褂玫絯ebpack工具,但這個(gè)工具又是基于node,而我對(duì)node沒(méi)有任何基礎(chǔ),然后每次出現(xiàn)問(wèn)題就在網(wǎng)上瘋狂的找啊找,在網(wǎng)上諸如類似這個(gè)問(wèn)題的解答很多,但是每個(gè)人的情況不一樣,而我相信我的情況是最復(fù)雜的那種,試過(guò)網(wǎng)上所有辦法之后還是沒(méi)有解決,最后摸索出了一套自己的萬(wàn)能解決辦法!
webpack-dev-server錯(cuò)誤法則:
前往項(xiàng)目根目錄刪除node_modules文件夾,然后在項(xiàng)目根目錄路徑下的終端運(yùn)行"npm install"等待安裝完之后,再次運(yùn)行“npm run dev”,有些人的是馬上就可以了,然而往往還會(huì)有人(譬如我)仍然報(bào)類似的錯(cuò)誤,這個(gè)時(shí)候你只需要再次重復(fù)相同的操作即可,“一次不成再刪再安裝”!??!
補(bǔ)充:webpack-dev-server的介紹與用法
為什么要用webpack-dev-server
在開(kāi)發(fā)中,我們都可以發(fā)現(xiàn)僅僅使用Webpack以及它的命令行工具來(lái)進(jìn)行開(kāi)發(fā)調(diào)試的效率并不高,每次編寫(xiě)好代碼之后,我們需要執(zhí)行npm run build命令更新js文件,然后再刷新頁(yè)面,才能看到更新效果。webpack-dev-server正好解決了這個(gè)問(wèn)題,是一款便捷的本地開(kāi)發(fā)工具。
webpack-dev-server 安裝及配置
用以下命令進(jìn)行安裝:
npm install webpack-dev-server --save-dev
--save-dev:將webpack-dev-server保存配置信息到pacjage.json的devDependencies(開(kāi)發(fā)環(huán)境依賴)節(jié)點(diǎn)中。這樣做是因?yàn)閣ebpack-dev-server僅僅在本地開(kāi)發(fā)時(shí)才會(huì)用到,在生產(chǎn)環(huán)境中并不需要它 。項(xiàng)目上線的時(shí)候,要進(jìn)行依賴安裝,就可以通過(guò)npm install--production過(guò)濾掉devDependencies中的冗余模塊,從而加快安裝和發(fā)布的速度。
為了便捷地啟動(dòng)webpack-dev-server,我們?cè)趐ackage.json中添加一個(gè)dev指令:
"scripts": { "build": "webpack", "dev": "webpack-dev-server --open" //open是自動(dòng)執(zhí)行后打開(kāi)頁(yè)面 }
最后,對(duì)webpack.config.js添加一個(gè)devServer對(duì)象,它是專門用來(lái)放webpack-dev-server配置的,webpack-dev-server可以看作一個(gè)服務(wù)者,它的主要工作就是接收瀏覽器的請(qǐng)求,然后將資源返回。當(dāng)服務(wù)啟動(dòng)時(shí),會(huì)先讓W(xué)ebpack進(jìn)行模塊打包并將資源準(zhǔn)備好(在示例中就是bundle.js)。當(dāng)webpack-dev-server接收到瀏覽器的資源請(qǐng)求時(shí),它會(huì)首先進(jìn)行URL地址校驗(yàn)。如果該地址是資源服務(wù)地址(上面配置的publicPath),就會(huì)從Webpack的打包結(jié)果中尋找該資源并返回給瀏覽器。反之,如果請(qǐng)求地址不屬于資源服務(wù)地址,則直接讀取硬盤(pán)中的源文件并將其返回
"devServer": { "publicPath": './dist', "port": 3000 }
這里有一點(diǎn)需要注意。直接用Webpack開(kāi)發(fā)和使用webpack-dev-server有一個(gè)很大的區(qū)別,前者每次都會(huì)生成budnle.js,而webpack-dev-server只是將打包結(jié)果放在內(nèi)存中,并不會(huì)寫(xiě)入實(shí)際的bundle.js,在每次webpack-dev-server接收到請(qǐng)求時(shí)都只是將內(nèi)存中的打包結(jié)果返回給瀏覽器。
webpack-dev-server還有一項(xiàng)很便捷的特性就是live-reloading(自動(dòng)刷新)。當(dāng)我們修改了內(nèi)容之后,切換到瀏覽器你會(huì)發(fā)現(xiàn),瀏覽器內(nèi)容也變化了。
webpack-dev-server特點(diǎn):
- 令Webpack進(jìn)行模塊打包,并處理打包結(jié)果的資源請(qǐng)求
- 作為普通的Web Server,處理靜態(tài)資源文件請(qǐng)求
- 解決了來(lái)回npm run build,再更新代碼的問(wèn)題,比較便捷
- 可以設(shè)置port端口和open(自動(dòng)打開(kāi)頁(yè)面),其他更多配置可以參考官網(wǎng)api:webpack.js.org/configurati…
- 自動(dòng)刷新:瀏覽器自動(dòng)更改后的內(nèi)容
到此這篇關(guān)于'webpack-dev-server' 不是內(nèi)部或外部命令也不是可運(yùn)行的程序 或批處理文件的最新解決方法的文章就介紹到這了,更多相關(guān)webpack-dev-server不是內(nèi)部或外部命令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- webpack-dev-server原理解析及跨域解決方法
- webpack-dev-server核心概念案例詳解
- 詳解Webpack-dev-server的proxy用法
- 使用webpack3.0配置webpack-dev-server教程
- 淺談webpack-dev-server的配置和使用
- 使用webpack-dev-server處理跨域請(qǐng)求的方法
- 詳解webpack-dev-server 設(shè)置反向代理解決跨域問(wèn)題
- 詳解webpack-dev-server的簡(jiǎn)單使用
- webpack-dev-server自動(dòng)更新頁(yè)面方法
- webpack-dev-server 的 host 配置 0.0.0.0的方法
相關(guān)文章
Bootstrap和Java分頁(yè)實(shí)例第二篇
這篇文章主要為大家詳細(xì)介紹了Bootstrap和Java分頁(yè)實(shí)例第二篇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript生成隨機(jī)數(shù)的4種自定義函數(shù)分享
這篇文章主要介紹了JavaScript生成隨機(jī)數(shù)的4種自定義函數(shù)分享,本文講解了4種方法并同時(shí)給出4個(gè)代碼片段,需要的朋友可以參考下2015-02-02Threejs實(shí)現(xiàn)滴滴官網(wǎng)首頁(yè)地球動(dòng)畫(huà)功能
這篇文章主要介紹了Threejs實(shí)現(xiàn)滴滴官網(wǎng)首頁(yè)地球動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07Three.js?中的屏幕空間環(huán)境光遮蔽SSAO
這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04