怎么调试Webpack+React项目，报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办

今天在WebStorm上Windows上准备调试一个React项目，就出现了这样的报错。 Node Parameters里面写的是webpack-dev-server的执行文件.\node_modules\.bin\webpack-dev-server.cmd，用的是相对当前工作空间Working directory的相对路径。

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError:missing ) after argument list     

之前一直在Mac都是类似这么写的，怎么会报错呢？

在Mac上不存在这样的问题

只能换一个思路试试了，我们执行npm instal --save-dev webpack-dev-server时是会在node_modules文件夹创建两个东西的

1. node_modules文件夹里面会有webpack-dev-server文件夹
2. node_modules文件夹的.bin文件夹里面会有webpack-dev-server执行文件

.bin文件里面的执行文件最终还是会执行其对应node_modules文件里面的webpack-dev-server文件内容的，可以查看此执行文件得知这一点。

其实执行 ./node_modules/.bin/webpack-dev-server.cmd 其实就是执行/node_modules/webpack-dev-server/bin/webpack-dev-server.js

之所以在Windows上报错，我想是因为Windows不支持shell脚本语句所导致，而Mac上支持shell脚本

一开始提到的报错也是显示是这个文件报错了，既然如此，我们为什么不试试直接执行node_modules/webpack-dev-server里面的文件呢？

将Node Parameters里面写成.\node_modules\webpack-dev-server\bin\webpack-dev-server.js可以成功调试了。

简单总结下

1. webpack本质也是JavaScript项目，我们同样可以使用类似node xxx.js的方式来运行和调试webpack。
2. 我们安装在package.json的'devDependencies'里面的依赖包有两种运行方式：

   1. 使用快捷方式: ./node_modules/.bin/webpack-dev-server.cmd
   2. 使用完整路径方式: .\node_modules\webpack-dev-server\bin\webpack-dev-server.js

PS: 开发童鞋喜欢用Mac，并不是为了装X，Mac的类unix的命令行就是很爽，少一堆问题。