'webpack-dev-server' 不是内部或外部命令也不是可运行的程序或批处理文件的最新解决方法

2023-02-07 12:01

短信预约 -IT技能 免费直播动态提醒

'webpack-dev-server' 不是内部或外部命令也不是可运行的程序或批处理文件的最新解决方法

相信很多人在使用webpack-dev-server时肯定会遇到一些问题（如下图所示）

我在学习vue框架的时候因为要使用到webpack工具，但这个工具又是基于node，而我对node没有任何基础，然后每次出现问题就在网上疯狂的找啊找，在网上诸如类似这个问题的解答很多，但是每个人的情况不一样，而我相信我的情况是最复杂的那种，试过网上所有办法之后还是没有解决，最后摸索出了一套自己的万能解决办法！

webpack-dev-server错误法则：

前往项目根目录删除node_modules文件夹，然后在项目根目录路径下的终端运行"npm install"等待安装完之后，再次运行“npm run dev”，有些人的是马上就可以了，然而往往还会有人（譬如我）仍然报类似的错误，这个时候你只需要再次重复相同的操作即可，“一次不成再删再安装”！！！

补充：webpack-dev-server的介绍与用法

为什么要用webpack-dev-server

在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。

webpack-dev-server 安装及配置

用以下命令进行安装：

npm install webpack-dev-server --save-dev

--save-dev：将webpack-dev-server保存配置信息到pacjage.json的devDependencies(开发环境依赖)节点中。这样做是因为webpack-dev-server仅仅在本地开发时才会用到，在生产环境中并不需要它。项目上线的时候，要进行依赖安装，就可以通过npm install--production过滤掉devDependencies中的冗余模块，从而加快安装和发布的速度。

为了便捷地启动webpack-dev-server，我们在package.json中添加一个dev指令：

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"  //open是自动执行后打开页面
  }

最后，对webpack.config.js添加一个devServer对象，它是专门用来放webpack-dev-server配置的，webpack-dev-server可以看作一个服务者，它的主要工作就是接收浏览器的请求，然后将资源返回。当服务启动时，会先让Webpack进行模块打包并将资源准备好（在示例中就是bundle.js）。当webpack-dev-server接收到浏览器的资源请求时，它会首先进行URL地址校验。如果该地址是资源服务地址（上面配置的publicPath），就会从Webpack的打包结果中寻找该资源并返回给浏览器。反之，如果请求地址不属于资源服务地址，则直接读取硬盘中的源文件并将其返回

"devServer": {
    "publicPath": './dist',
    "port": 3000
  }

这里有一点需要注意。直接用Webpack开发和使用webpack-dev-server有一个很大的区别，前者每次都会生成budnle.js，而webpack-dev-server只是将打包结果放在内存中，并不会写入实际的bundle.js，在每次webpack-dev-server接收到请求时都只是将内存中的打包结果返回给浏览器。

webpack-dev-server还有一项很便捷的特性就是live-reloading（自动刷新）。当我们修改了内容之后，切换到浏览器你会发现，浏览器内容也变化了。