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