loaderUtils.getOptions is not a function
有着掉坑体质的我,总是会遇到各种奇奇怪怪的问题。在我vue+webpack+vux单页面应用开始以来,我的依赖包几乎天天掉:)每天都要按着提示机械地把各种包装上才能开始工作,有时候还会出现各种奇怪的报错,比如今天说的这个A valid query string passed to parseQuery should begin with '?'
,而在遇到这个问题之前,我是先碰到loaderUtils.getOptions is not a function
的报错,然后我按照网上答案执行cnpm install vue-loader vue-template-compiler loader-utils
更新插件,之后出现了一长串惊心动魄的红色,开始了我悲惨的踩坑之路:)cnpm install vue-loader vue-template-compiler loader-utils
一开始我尝试更新了babel-loader、loader-utils等插件发现没用,之后我看到webpack的loader-utils有提及过这个问题,可是还是没能解决我的问题,后来我找到可能是html-webpack-plugin
的问题,然后在html-webpack-plugin
的两个issue ([2],[3])下找到一点思路- 各种依赖包中是有下载顺序的,所以如果有时自己乱更新一个插件可能会影响其和其他依赖包的兼容
- 在
package-lock.json
中看到html-webpack-plugin
下依赖包的版本(可参考下图),
其中,我曾经尝试过cnpm install --save-dev loader-utils@1.0.4
把我的loader-utils版本回退,A valid query string passed to parseQuery should begin with '?'
报错没有了,但出现了loaderUtils.parseQuery is not a function
([4])。
loaderUtils.parseQuery is not a function
我先后执行了下面两条代码(一定要按顺序)npm install --save-dev webpack
npm install --save-dev html-webpack-plugin
然后!!我终于仿佛看到胜利的曙光!
第一次觉得掉依赖包也能这么幸福o( ̄▽ ̄)o
之后我又开始漫长但幸福的补包之路:)
但,生活总是处处充满惊喜(笑容中带点疲惫)- 由一长串不知名错误。。
之后我尝试cnpm install --save-dev extract-text-webpack-plugin@beta css-loader style-loaderss-loader less
,报错从红色变成白色chunk.sortModules is not a function
然后我重新
cnpm install
,报错没了掉包又来了,装完之后不知名报错又来了:)心态崩了 - 最终解决方法
其实在这悲催的过程我曾无数次使用npm/cnpm install
更新依赖包的版本,和尝试删掉node_module
文件夹重新 npm i,可是结果都不行。可是!在这一次,我把node_module
文件夹删掉的同时把package-lock.json
删掉,再重新npm i,一切就都结束了(笑容中带点欣慰)done!
- 这解决方法看上去简单粗暴了点,可是能运行就行,还省事。虽然每次掉坑都很想死,可是在查找资料中无形中还是学到不少东西的,当最后看到的结果没有红色的时候,还是挺欣慰的,还是值得的。
[参考资料]
[1]https://github.com/webpack/loader-utils/issues/56
[2]https://github.com/jantimon/html-webpack-plugin/pull/663
[3]https://github.com/jantimon/html-webpack-plugin/issues/727
[4]https://github.com/JeffreyWay/laravel-mix/issues/985