这次开贴继续分享小问题的解决记录,这次在学习webpack的devServer中遇到了一个小问题,问题发生的过程我自己也大致捋了一下:首先,自己开了一个文件,专门为devServer配置练习,配置成功后并打开了浏览器(localhost:3000)实现了代码实时更新,实时打包,用完后关闭了浏览器的这个页面(localhost:3000);当自己又开启另外一个文件也配置了devServer,引入更多loader对其他资源进行打包操作时,此时使用npx webpack-dev-server开启浏览器时就出现以下问题:
这个问题其实说明了你的webpack.config.js中devServer配置的端口号:3000(port:3000)被一直占用了:
module.exports = {
......
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
......
}
解决思路和方法:需要将一直被占用的端口号:3000 kill掉,这样就可以使用这个端口号了.首先打开CMD(Mac中打开终端),在命令行内输入:netstat -ano(Mac中输入: lsof -i tcp:port):
找到port3000对应的进程号(我这是17044),在命令行内输入:tskill 17044 (Mac中sudo kill Pid号)
回到vscode中terminal输入npx webpack-dev-server 此次可以正常使用端口号3000,并自动打开浏览器实时更新自己写代码的状态了: