记一次 webpack 打包失败

问题：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 类型问题！
复制代码