欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年02月07日 09:16:37   作者:Leadyang  
這篇文章主要介紹了'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運行的程序?或批處理文件的最新解決方法,文中給大家補充介紹了webpack-dev-server的介紹與用法,需要的朋友可以參考下

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

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

我在學(xué)習(xí)vue框架的時候因為要使用到webpack工具,但這個工具又是基于node,而我對node沒有任何基礎(chǔ),然后每次出現(xiàn)問題就在網(wǎng)上瘋狂的找啊找,在網(wǎng)上諸如類似這個問題的解答很多,但是每個人的情況不一樣,而我相信我的情況是最復(fù)雜的那種,試過網(wǎng)上所有辦法之后還是沒有解決,最后摸索出了一套自己的萬能解決辦法!

webpack-dev-server錯誤法則:

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

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

為什么要用webpack-dev-server

在開發(fā)中,我們都可以發(fā)現(xiàn)僅僅使用Webpack以及它的命令行工具來進行開發(fā)調(diào)試的效率并不高,每次編寫好代碼之后,我們需要執(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ā)時才會用到,在生產(chǎn)環(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可以看作一個服務(wù)者,它的主要工作就是接收瀏覽器的請求,然后將資源返回。當(dāng)服務(wù)啟動時,會先讓W(xué)ebpack進行模塊打包并將資源準(zhǔn)備好(在示例中就是bundle.js)。當(dāng)webpack-dev-server接收到瀏覽器的資源請求時,它會首先進行URL地址校驗。如果該地址是資源服務(wù)地址(上面配置的publicPath),就會從Webpack的打包結(jié)果中尋找該資源并返回給瀏覽器。反之,如果請求地址不屬于資源服務(wù)地址,則直接讀取硬盤中的源文件并將其返回

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

這里有一點需要注意。直接用Webpack開發(fā)和使用webpack-dev-server有一個很大的區(qū)別,前者每次都會生成budnle.js,而webpack-dev-server只是將打包結(jié)果放在內(nèi)存中,并不會寫入實際的bundle.js,在每次webpack-dev-server接收到請求時都只是將內(nèi)存中的打包結(jié)果返回給瀏覽器。

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

webpack-dev-server特點:

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

到此這篇關(guān)于'webpack-dev-server' 不是內(nèi)部或外部命令也不是可運行的程序 或批處理文件的最新解決方法的文章就介紹到這了,更多相關(guān)webpack-dev-server不是內(nèi)部或外部命令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Bootstrap和Java分頁實例第二篇

    Bootstrap和Java分頁實例第二篇

    這篇文章主要為大家詳細(xì)介紹了Bootstrap和Java分頁實例第二篇,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JS高階函數(shù)原理與用法實例分析

    JS高階函數(shù)原理與用法實例分析

    這篇文章主要介紹了JS高階函數(shù)原理與用法,結(jié)合實例形式分析了javascript函數(shù)式編程、一等函數(shù)、高階函數(shù)等相關(guān)概念、原理及使用技巧,需要的朋友可以參考下
    2019-01-01
  • JavaScript注冊時密碼強度校驗代碼

    JavaScript注冊時密碼強度校驗代碼

    這篇文章主要為大家詳細(xì)介紹了JavaScript注冊時密碼強度校驗代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • 自制微信公眾號一鍵排版工具

    自制微信公眾號一鍵排版工具

    這篇文章主要介紹了自制微信公眾號一鍵排版工具的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • JavaScript生成隨機數(shù)的4種自定義函數(shù)分享

    JavaScript生成隨機數(shù)的4種自定義函數(shù)分享

    這篇文章主要介紹了JavaScript生成隨機數(shù)的4種自定義函數(shù)分享,本文講解了4種方法并同時給出4個代碼片段,需要的朋友可以參考下
    2015-02-02
  • 詳解JavaScript中的this指向問題

    詳解JavaScript中的this指向問題

    這篇文章主要介紹了詳解JavaScript中的this指向問題,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2021-02-02
  • 詳解微信JS-SDK選擇圖片遇到的坑

    詳解微信JS-SDK選擇圖片遇到的坑

    這篇文章主要介紹了詳解微信JS-SDK選擇圖片遇到的坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • Threejs實現(xiàn)滴滴官網(wǎng)首頁地球動畫功能

    Threejs實現(xiàn)滴滴官網(wǎng)首頁地球動畫功能

    這篇文章主要介紹了Threejs實現(xiàn)滴滴官網(wǎng)首頁地球動畫效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-07
  • javascript跨瀏覽器的屬性判斷方法

    javascript跨瀏覽器的屬性判斷方法

    這篇文章主要介紹了javascript跨瀏覽器的屬性判斷的方法,需要的朋友可以參考下
    2014-03-03
  • Three.js?中的屏幕空間環(huán)境光遮蔽SSAO

    Three.js?中的屏幕空間環(huán)境光遮蔽SSAO

    這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04

最新評論