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

webpack-dev-server工具能實現自動打包編譯和熱更新

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

npm install webpack-dev-server -D

這時在命令行窗口中敲 webpack-dev-server 會發現

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

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

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

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

"dev": "webpack-dev-server"

 

當然此處可以帶一些參數配置:  --open　　　　　　啟動時打開瀏覽器

　　　　　　　　　　　　　　--port　　　　　　設置端口號

　　　　　　　　　　　　　　--contentBase　　設置根目錄(即 設置 http://localhost:8080 打開時顯示哪個界面)

　　　　　　　　　　　　　　--hot　　　　　　熱更新

"dev": "webpack-dev-server --open --port 8080 --contentBase src --hot"

 

 

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

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

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

npm install webpack -D

但是 運行依然出錯:

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

於是:

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

然后 npm run dev 運行成功  然后就可以http://localhost:8080訪問了

如果沒有安裝成功可能出現的情況是緩存沒有清

npm cache clean --force