sh: webpack-dev-server: command not found 错误

公司的项目前端代码，技术栈用的是react+dva+react-router+antd，没有采用服务器端渲染，拉下来后npm install,太慢了，换了cnpm install，安装完成。

"dev": "webpack-dev-server --progress --config ./webpack.dev.config.js",

然后npm run dev，报错

我看网上有人说需要把 webpack-dev-server 全局安装，然后把webpack-dev-server放在命令行配置的路径中，我感觉这种做法不太好。

贴一下项目的依赖配置

 "dependencies": {
    "antd": "^2.12.1",
    "babel-runtime": "^6.9.2",
    "classnames": "^2.2.5",
    "dva": "^1.2.1",
    "dva-loading": "^0.2.1",
    "font-awesome": "^4.7.0",
    "html-webpack-plugin": "^2.28.0",
    "jquery": "^1.12.4",
    "lodash": "^4.17.4",
    "normalize.css": "^5.0.0",
    "nzh": "^1.0.0",
    "rc-queue-anim": "^1.0.1",
    "react": "^15.6.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^15.6.1",
    "react-images": "^0.5.4",
    "react-quill": "^1.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.0",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-dva-hmr": "^0.3.2",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-runtime": "^6.22.0",
    "css-loader": "^0.26.1",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "expect": "^1.20.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.10.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "husky": "^0.12.0",
    "imagemin-webpack-plugin": "^1.4.4",
    "json-loader": "^0.5.4",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "node-sass": "^4.5.2",
    "postcss-loader": "^1.3.0",
    "react-dom": "^15.6.1",
    "redbox-react": "^1.3.2",
    "rimraf": "^2.5.4",
    "roadhog": "^0.5.2",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-bundle-analyzer": "^2.3.0"
  }

项目是一个demo上改的所以配依赖比较乱，然而并没有找到webpack和其相关的包的配置，那就去node-module去找找看

发现webpack相关的依赖包都已经引用进来了。

这是因为npm/cnpm 在安装依赖的时候会先找到项目的package.json文件，安装 dependencies和devDependencies中引用的依赖包，然后再根据这些子包的package.json文件中的dependencies配置项，再计算出后面需要安装的依赖包的版本号等信息，逐步遍历计算最后将所有依赖的包安装进来。
如果用npm install的话，在node_module文件夹下的依赖包中的package.json文件中，就能找到相应的依赖路径。

但是cnpm install的话，在node_module文件夹下的依赖包中的package.json文件中就找不到这种反向的依赖关系。

最后我对比了一下发现找到原因：

用cnpm install 的node_modules下面的.bin目录是这样的

用npm install 的node_modules/.bin目录是这样的

可以发现，cnpm install 只是将我们项目下的pakage.json 引用的包生成的脚本加入到.bin文件夹中
而npm install 会将所有关联到的包所生成的脚本全部放到.bin文件夹中

所以最后解决办法是，在pakage.json中的devDependencies下添加

"webpack-dev-server": "^1.16.2"

由于webpack-dev-server是依赖的roadhog,我看roadhog中的版本号

选择一样的版本，避免出其它的毛病
然后将node_module下的依赖包全删掉再重新cnpm install，然后npm run dev 就跑起来了

第一次写博客，有什么写的不清楚的地方或者错误的地方欢迎大家留言或私信，谢谢大家。

转载于:https://my.oschina.net/u/2314873/blog/1517981