webpack安装成功后的run build填坑之旅

上一篇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)，希望能够帮到各位小哥哥小姐姐们~