从Error: Cannot find module 'webpack-cli/bin/config-yargs'到package.json依赖管理dependencies中 ^ 和 ~ 的区别...

2019独角兽企业重金招聘Python工程师标准>>>

故障现场：

internal/modules/cjs/loader.js:582

throw err;

Error: Cannot find module 'webpack-cli/bin/config-yargs'

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)

at Function.Module._load (internal/modules/cjs/loader.js:506:25)

at Module.require (internal/modules/cjs/loader.js:636:17)

at require (internal/modules/cjs/helpers.js:20:18)

at Object. (/Users/wlc534/workspace/webpack-react-spa/node_modules/webpack-dev-server/bin/webpack-dev-server.js:80:1)

at Module._compile (internal/modules/cjs/loader.js:688:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)

at Module.load (internal/modules/cjs/loader.js:598:32)

at tryModuleLoad (internal/modules/cjs/loader.js:537:12)

at Function.Module._load (internal/modules/cjs/loader.js:529:3)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] dev: `cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

根据提示：Error: Cannot find module 'webpack-cli/bin/config-yargs' 是有模块找不到，那就去node_modules看看，是真没有。很奇怪的是同一个项目，在不同电脑表现不一样。pro正常，air不能启动。能有不同的表现就通过对比找出异同点。

改前Package.json	改后Package.json
"webpack": "^4.23.1", "webpack-bundle-analyzer": "^3.0.3 ", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10",	"webpack": "^4.23.1", "webpack-bundle-analyzer": "^3.0.3 ", "webpack-cli": "3.1.2", "webpack-dev-server": "^3.1.10",
改前Package-lock.json	改后Package-lock.json
"webpack-cli": { "version": "3.3.2", "resolved": "https://registry.npm.taobao.org/webpack-cli/download/webpack-cli-3.3.2.tgz", "integrity": "sha1-rtJDew2wp/qirShIThZqU2ABSpE=", "dev": true, "requires": { "chalk": "^2.4.1", "cross-spawn": "^6.0.5", "enhanced-resolve": "^4.1.0", "findup-sync": "^2.0.0", "global-modules": "^1.0.0", "import-local": "^2.0.0", "interpret": "^1.1.0", "loader-utils": "^1.1.0", "supports-color": "^5.5.0", "v8-compile-cache": "^2.0.2", "yargs": "^12.0.5" },	"webpack-cli": { "version": "3.1.2", "resolved": "https://registry.npm.taobao.org/webpack-cli/download/webpack-cli-3.1.2.tgz", "integrity": "sha1-F9fgG3f4n4hKK7+dtUXw9qZI50Y=", "dev": true, "requires": { "chalk": "^2.4.1", "cross-spawn": "^6.0.5", "enhanced-resolve": "^4.1.0", "global-modules-path": "^2.3.0", "import-local": "^2.0.0", "interpret": "^1.1.0", "loader-utils": "^1.1.0", "supports-color": "^5.5.0", "v8-compile-cache": "^2.0.2", "yargs": "^12.0.2" },

因为"webpack-cli": "^3.1.2"这种写法,真正安装是3.3.2，恰巧升级是断崖式，目录结构都变了，找不到对应模块。

解决方法：

package.json 中"webpack-cli": "3.1.2"

dependencies与devDependencies有什么区别呢？devDependencies 里面的插件只用于开发环境，不用于生产环境dependencies 是需要发布到生产环境的

pakage.json 中对引入依赖包版本进行管理时，dependencies中常常可以看到类似 ^1.2.0 或 ~1.2.0 这样的版本范围指示。那么，这里的 ^ 和 ~ 具体表示什么含义呢。

这里简单把 ^ 和 ~ 的区别摘抄一下，备忘。

一个完整的版本号组表示为： [主要版本号，次要版本号，补丁版本号]

npm模块的完整的版本号一般是【主版本 . 次要版本 . 补丁版本】，一般情况下，次要版本号发生改变的话，表示程序有重大更新。

1. 用 ~ 指示范围

如果指定了次要版本，允许补丁版本升级。如果没有指定次要版本，允许次要版本升级。

2. 用 ^ 指定范围

允许不会改变最左边的不为零的版本号的版本提升，也就是说，1.0.0允许次要、补丁版本升级，0.1.0允许补丁版本升级，^0.0.x 不允许升级。