webpack 5 與 webpack-dev-server 3兼容性問題

說明：這里使用的是webpack: "^5.9.0",webpack-cli: "^4.2.0",webpack-dev-server: "^3.11.0"

---

問題1：通過 npx webpack-dev-server 啟動項目失敗，報錯：Error: Cannot find module 'webpack-cli/bin/config-yargs'

解決辦法：使用 webpack serve --open 命令啟動，這里需要注意，執行后會提示缺少打開對象 , 所以在open 后添加你要打開的對象。（webpack serve --open Chrome.exe） 將這個命令寫入package.json中，就不用每次都這樣執行了。

"scripts": {
  "start": "webpack serve --open Chrome.exe"
 },

執行 npm run start 頁面就正常啟動了

問題2：設置了hot:true,更改app.vue里面隨意更改點東西，發現終端確實重新打包了，但是瀏覽器頁面並沒有發生變化，手動刷新后，確實發生了更改。

解決辦法：在webpack配置文件中設置 target: 'web'，添加之后確實生效。但是看官方文檔 這個屬性的默認值就是web 也就是說不設置就可以，可能還是webpack5與webpack-dev-server3兼容性問題導致這個屬性失效了，需要設置后才起作用。