关于webpack编译ts项目报错Module not found

背景

最近需要封装个JSSSDK，尝试使用webpack配合ts进行项目搭建，在编译时遇到下方问题：

从以上报错可知，入口文件为main.ts，在main.ts中引入utils.ts，执行webpack编译时出现以上报错。

解决过程

刚开始没有认真思考报错，一上来一通乱搜，以为是webpack或者ts-loader的版本问题，所以又把几个依赖包的版本调整重试，发现又出现了别的报错，还耐心找了下解决方案，但是没有解决。
一拍脑袋，还是回去之前的版本重新认真看报错。发现它似乎是想要查找引用的文件，通过报错可以看出，它分别查找了utils、utils.js、utils.json、utils.wasm、utils文件夹但是就是没有找utils.js，导致报错。
通过以上分析感觉应该是某项解析配置未配置，便开始查找相关文档，找到resolve.extensions，是用来指定webpack尝试顺序解析的后缀名，此刻恍然大悟，都对上了！赶紧配置上试试，成功解决。

相关知识补充学习

以上问题涉及模块解析，所以把webpack模块和模块解析两个模块的内容进行补充学习。

模块

什么是模块？webpack文档给出的解释：在模块化编程中，开发者将程序分解为功能离散的chunk，并称之为模块。所以在我们的项目中，utils.ts便是一个chunk。
与Node.js模块相比，webpack模块能以各种方式表达它们的依赖关系。下面是一些示例：

• es2015 import 语句
• CommonJS require() 语句
• AMD define 和 require语句
• css/less/sass文件中的 @import 语句
• stylesheeturl(...)或者HTML<img src=...>文件中的图片链接

模块解析

resolver帮助webpack从每个require/import语句中，找到需要引入到bundle中的模块代码。webpack使用enhanced-resolve来解析文件路径。
webpack能解析三种文件路径：

• 绝对路径
  已获得文件的绝对路径，不需要再做进一步解析。

• 相对路径

  import '../src/file1';
  import './file2';
  

  在这种情况下，使用import 或require 的资源文件所处的目录，被认为是上下文目录。在import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径。

• 模块路径

  import 'module';
  import 'module/lib/file';
  

  在resolve.modules 中指定的所有目录检索模块。可以通过配置别名的方式来替换初始模块路径，具体参照resolve.alias 配置选项。
  一旦根据上述规则解析路径后，resolver将会检查路径是指向文件还是文件夹。如果路径指向文件：

  • 如果文件具有扩展名，则直接将文件打包。
  • 否则，将使用resolve.extensions 选项作为文件扩展名来解析，此选项会告诉解析器在解析中能够接受哪些扩展名（例如.js ,.jsx ）。

  如果路径指向一个文件夹，则进行如下步骤寻找具有正确扩展名的文件：

  • 如果文件中包含package.json 文件，则会根据resolve.mainFields 配置中的字段顺序查找，并根据package.json 中的符合配置要求的第一个字段来确定文件路径。
  • 如果不存在package.json 文件或resolve.mainFilelds没有返回有效路径，则会根据resolve.mainFiles 配置选项中指定的文件名顺序查找，看是否能在import/require的目录下匹配到一个存在的文件名。
  • 然后使用resolve.extensions 选项，以类似的方式解析文件扩展名。

反思

以上问题出现，还是因为对于webpack的许多基本配置还不太了解，但是成功解决了问题，积极吸取经验，补充相关知识，还是有很多收获，需要抽空不断补充相关基础知识，这样后面在遇到问题可能解决起来就不这么费劲了。