记一次 webpack 打包失败

记一次 webpack 打包失败

技术杂谈小彩虹2021-08-17 16:06:37290A+A-
问题:webpack 打包失败,构建产物也没有输出!
错误信息:无,打包过程的中的进度条也没有显示错误。
难点:几乎没有任务错误提示。

由于没有错误提示,导致排查的范围很大,难以快速定位问题!

我想了想可能的范围有(可能性由上到下):

  • 依赖文件
  • 业务代码
  • webpack
    • 配置问题
    • 自身 bug
  • typescript
  • npm

没办法,只能使用控制变量法缩小范围了。

开发的时候,webpack-dev-server 程序使用的是开发版的 webpack 配置文件,是能正常打包开发的。 正式打包的时候,webpack 程序使用的是生产版的配置文件,就打包失败了。 我觉得可能是生产版的 webpack 配置的问题,但是这个配置在之前版本的业务代码中是能打包成功的。

我决定改变 webpack 配置文件这个变量,让 webpack 程序使用开发版的配置文件试一下,结果打包失败了,还是没有报错信息,但是构建产物竟然输出了,我简单的试了下,输出的文件是能正常运行的。 此时我觉得很可能是生产版的配置文件出了问题。

我只改变 wepback 的配置文件的参数,我发现只有 mode 这个参数不一样的情况下,两个版本的配置文件的唯一区别是,虽然都报错,都没有输出错误信息,但是开发版的配置文件能输出构建产物。然后我查 webpack 文档后发现,webpack 在生产模式下,如果打包过程中有错误是不输出构建产物的。

此时我就很困惑了,不确定是配置文件还是业务代码有问题。 没有报错信息,真是很头疼,我怀疑是 webpack 配置问题,导致没有输出错误信息,后来查了文档在开发模式下是会输出错误信息的。

此时我觉得可能是业务代码有问题,我对业务代码进行了变量控制,由于是 SPA 应用所以只有一个入口,我把入口代码全部注释了,结果还是报错,说明应该不是代码问题。

此时我很无助,要是赶时间的话,我可以忽略报错,因为构建产物是可以正常输出的。 但是时间充裕,我非常想搞定这个问题。

抱着一丝丝希望看看是不是 typescript 类型报错,我在终端直接运行 tsc 命令,结果没有报错,看来应该不是 ts 类型的问题。

绝望了,我的 webpack 4 已经是最新版本了,几乎不可能有不输出报错信息这么严重的 bug,我随意的看着 webpack 打包命令,我突然发现打包命令的尾部这段命令会把打包结果保存到 json 文件里,我觉得这有可能影响了错误信息的输出。 我把尾部的命令去掉后,错误信息终于输出了!!!问题找到了,竟然是 ts 类型检查时报错了。我X!

接下来是刨根问底时间,说明一下其中的一些疑问:

  • Q: 我用 tsc 命令检查过类型了,怎么编译的时候会报错呢?

  • A: 我做 ts 类型检查的时候用的是本地的 ts ,本地 ts 的版本是 4.1.3。然后打包时用的是项目中的 ts ,版本是 4.2.4,然而那个错误代码是在 ts 4.1.5 时加入的,我的天!完美错过~

  • Q: 为什么使用 webpack-dev-server 开发时,打包成功了?

  • A: 因为 fork-ts-checker-webpack-plugin 插件会启用一个单独的线程,进行类型检查。

  • Q: 入口文件业务代码都被注释掉了,webpack 是不会读取到哪些文件才对呀,但是为什么还是读取了无关的文件?

  • A: 没错,webpack 打包时是根据文件的 import 关系来读取文件的,但是 fork-ts-checker-webpack-plugin 插件不是。它会根据后缀和目录来判断需不需检查该文件,就算文件没有被使用到。

简约版:

没有错误信息 ->
控制变量法 ->
wepback 生产版的配置文件问题?->
不是,开发版也有问题 ->
不排除是配置文件的问题,但是没有头绪,看看业务代码 ->
业务代码入口代码全注释掉 ->
不是业务代码的问题,试试 typescript ->
在终端直接运行 tsc 命令检查过了没问题 ->
无意发现 webpack 打包命令可能有问题,删除非必要命令后 ->
错误信息终于输出,是 ts 类型问题!

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们