文档章节

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

jiberka
 jiberka
发布于 2017/08/21 14:21
字数 672
阅读 2863
收藏 0

公司的项目前端代码,技术栈用的是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 就跑起来了


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

© 著作权归作者所有

jiberka
粉丝 0
博文 6
码字总数 3947
作品 0
海淀
程序员
私信 提问
求助 webpack-dev-server的问题 服务器链接报错

使用webpack-dev-server的时候 输入 webpack-dev-server 会出现如下错误在家里使用没有问题换到单位的电脑就出现问题了 求助: localhost:webpack gy$ webpack-dev-server --config webpack....

曾迦
2016/08/18
1K
0
为我们的 Vue SSR程序添加热更新功能

前沿 通过上一篇文章 通过vue-cli3构建一个SSR应用程序 我们知道了什么是SSR,以及如何通过vue-cli3构建一个SSR应用程序。但是最后遗留了一些问题没有处理,就是没有添加开发时的热更新功能,...

lentoo
2018/10/15
0
0
Webpack 开发工具与模块热替换

Webpack 开发工具与模块热替换 ️ 注意: 永远不要在生产环境中使用这些工具,永远不要。 devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行。然而因为 webpac...

guitar_zp
2017/06/15
0
0
webpack备忘录

开始 一开始用gulp实现js和css文件的打包,减少了请求,同时通过gzip等压缩方法也能控制文件的大小.但是后来文件越来越多,包越打越大.同时还有了以下需求: 按需加载 模块化开发 文件修改自动更...

boogoogle
2016/02/25
316
0
Webpack HMR 原理解析

Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过...

冉四夕
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
51分钟前
3
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0
安装fastdfs文件服务器步骤

1、安装libfastcommon wget https://github.com/happyfish100/libfastcommon/archive/master.zip 解压后安装 cd fastcommon-master ./make.sh ./make.sh install 2、安装 FastDFS,从sourcef......

lsjlgo
今天
3
0
MySQL 5.7 免安装版配置

下载地址:https://dev.mysql.com/downloads/mysql/ 安装步骤 1.下载zip解压到目录下 2.配置环境变量 新建系统变量:MYSQL_HOME,值:D:\DevelopmentTool\Mysql-5.7.26-winx64 修改path变量:...

华山猛男
今天
7
0
java map的遍历

//从大的角度可以分为两类Set<String> set=map.keySet();这里面还可以分为3类, 从set的角度来分 //Set<Map.Entry<String, String>> entery=map.entrySet(); public class Test { public sta......

南桥北木
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部