Yarn 4 Pnp+Webpack+TypeScript项目路径解析错误求助

问题根源分析 #

1. Webpack配置中重复定义了resolve字段，第二个resolve覆盖了包含extensions的第一个配置，导致Webpack无法自动解析.ts后缀的文件。
2. TypeScript的模块解析策略与Webpack未对齐，同时Yarn Pnp的特殊模块解析逻辑需要插件正确集成。

分步解决方案 #

1. 修复Webpack配置的重复resolve字段 #

将两个resolve合并为一个，确保extensions和Pnp插件同时生效：

const path = require("path");
const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  entry: "./src/index.ts",
  devtool: "inline-source-map",
  mode: "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    plugins: [PnpWebpackPlugin],
  },
  resolveLoader: {
    plugins: [PnpWebpackPlugin.moduleLoader(module)],
  },
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

2. 调整TypeScript配置适配Webpack打包 #

将moduleResolution改为Bundler（适配Webpack这类打包工具），同时允许导入.ts后缀文件：

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist/",
    "noImplicitAny": true,
    "sourceMap": true,
    "target": "ES5",
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "noEmit": false,
    "resolveJsonModule": true
  },
  "exclude": ["./webpack.config.js", "./dist/**/*"]
}

3. 修正导入语句 #

直接导入.ts文件即可，无需添加.js后缀：

// index.ts
import { sha256 } from "js-sha256";
import { testFunc } from "./myFile.ts";
testFunc();

如果不想在导入时写.ts后缀，可在tsconfig.json的compilerOptions中添加：

"moduleSuffixes": [".ts", ".js"]

这样导入./myFile时，TypeScript会自动匹配.ts文件，Webpack也会根据extensions配置解析到对应的文件。

验证修复 #

执行yarn build命令，Webpack将正常解析.ts文件并完成编译，不再出现模块找不到的错误。

内容的提问来源于stack exchange，提问作者user6894119