1. 程式人生 > >webpack 4.x 解決 webpack-dev-server工具在webpack構建的項目中使用問題

webpack 4.x 解決 webpack-dev-server工具在webpack構建的項目中使用問題

運行 shel pts class col png 技術 style 發現

首先將webpack-dev-server安裝到項目中

npm install webpack-dev-server -D

這時在powershell中敲 webpack-dev-server 會發現

webpack-dev-server 不是內部或外部命令,也不是可運行的程序
或批處理文件。

這是由於該工具只是安裝到本地項目中了

納尼? 難道要全局安裝一下嗎???

沒必要!!!這時只需在根目錄的package.json中"scripts"下中添加

"dev": "webpack-dev-server"

即可使用 npm run dev 來運行項目了

但是筆者在運行項目時 報了以下錯誤:

技術分享圖片

該問題的出現是由於webpack沒有安裝到項目中導致的;只需要將之安裝到項目中即可:

npm install webpack -D

但是 運行依然出錯:

技術分享圖片

此問題的出現 通過查閱得知 應該是 webpack 與 webpack-cli版本不一致導致的

於是:

npm uninstall webpack -D
npm install webpack webpack-cli -D 

然後 npm run dev 運行成功

webpack 4.x 解決 webpack-dev-server工具在webpack構建的項目中使用問題