上一篇webpack血泪史(下)–从放弃到成功
个人认为,只要保证安装环境干净、网络状况良好,安装webpack及其一系列软件基本不会遇到什么大问题,安装好webpack后需要打包测试,往往这一步就是报错最多,步步踩坑的时候,我在这里记录一下我进行打包测试过程中遇到的各种问题。
首先,到package.json文件中查看依赖引用:
确定安装的cli和webpack已经被引用到配置文件中,接下来,执行下面的命令测试我们安装好的webpack是否能用
npm run dev
报错截图:
到package.json中查看,script中确实没有dev,查找资料,说全局安装webpack即可解决,先全局安装cli,再全局安装webpack:
sudo npm install --save-dev webpack-cli -g
sudo npm install --global webpack
全局安装cli后截图:
之前本地安装cli的时候,默认安装的版本是2.1.5,但这次全局安装的版本是3.3.4,为了避免出错,本地指定安装3.3.4版本的cli:
#在项目目录下本地安装
sudo npm install --save-dev webpack-cli@3.3.4
如果安装报错,先考虑是否完全卸载本地cli,卸载请见完全卸载webpack和npm,卸载好后再进行安装
安装好后再全局安装webpack:
这时候有报错,第一条报错信息 permission denied,是指npm权限不够,尝试在命令中增加–unsafe-perm
sudo npm install --global webpack --unsafe-perm
安装成功,这里忘记截图了哈哈
再次检查package.json的引用:
再次运行npm run dev,报错信息如下:
关于这个报错,没有找到有效的解决方法,因为我主要是测试工作,负责项目发版,所以忽略掉这个问题,直接测试打包
npm run build
执行后仍然报错:
对这个问题完全没有头绪,开发没有写过babylon,我也没有引用过。。。到网上查了又查,要运行下面这个命令来安装babel
npm install -D babel-loader @babel/core @babel/preset-env
运行结束,这个问题解决了,又出现了其他问题:
没办法,只能挨个解决问题,缺啥补啥了
npm install -D jsesc --save
继续build,报错:
解决以上问题,执行命令:
npm install -D isUrlRequest --save
报错:
执行命令:
npm i -D html-webpack-plugin --save
再次build,仍然报上面的错误
多次尝试没有找到解决这个问题的方法,转换了一下解决问题的思路,怀疑是package.json中引用的各种依赖的版本之间互不兼容,多次修改package.json中的版本号,不行;强制删除package.json文件,再重新安装编译,无果;强行删除node_modules文件,重新安装编译build,失败。。。
请教了公司大佬,大佬建议到Stack Overflow上找找和我同病相怜的人,,,还挺多,首先怀疑是node.js版本与其他插件版本不兼容,抛弃了对新版本不稳定的成见,到node.js上下载了最新current版本
安装好重新编译npm(执行 npm install)后再次build,仍然报错,不过报错信息已变,这是个好消息,证明我们的方法奏效了
又到Stack Overflow上逛了逛,有大神说可能是因为cli版本的问题,本地卸载cli后,再安装指定版本的cli:
然后尝试build,竟!然!成!功!了!这样就可以畅通无阻的发版了,小伙伴们可以尝试用脚本进行发版了,如果发版的过程遇到类似如下的问题,前面一个服务器地址,后面提示permission denied,应该是因为当前用户没有该项目发版权限,找到你们的项目管理人员,反馈一下这个问题,应该就可以解决啦
总之,碰到error就得解决error,webpack是个老大难的问题,没有任何一套完美的插件间的版本搭配方案可供参考,各个插件间相互依赖,环环相扣,只要有一个插件版本不行,整体的平衡就会被打破,作为一个测试人员,我所能接触到的webpack相关软件比开发少得多,但也提供一个作参考的版本搭配方案:node.js(12.5.0current)+webpack-cli(3.1.1)+webpack(4.34.0),希望能够帮到各位小哥哥小姐姐们~