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兼容性问题导致这个属性失效了，需要设置后才起作用。