Webpack 无法找到 TypeScript（显然）找到的导入

Question

背景：我从（对我来说工作正常）ASP.NET Core example of SignalR and webpack 开始。我的目标是使用 this TypeScript library 为 server-side 权威的多人游戏进行 client-side 插值。

我认为问题是 webpack-related 的原因是 VisualStudio 对 box2d.ts 库有智能感知，并且当运行时 tsc 本身没有报告错误。

这是我第一个使用 webpack 和 TypeScript 的项目，如果我遗漏了一些明显的东西，我们深表歉意。

webpack报错：

ERROR in ./src/index.ts
Module not found: Error: Can't resolve 'Box2D' in 
'C:\Users\nathan.b\Desktop\Gamey\Gamey\src'
 @ ./src/index.ts 2:0-31 3:14-26

更新：详细输出错误：

ERROR in ./src/index.ts
Module not found: Error: Can't resolve 'Box2D' in 'C:\Users\nathan.b\Desktop\Gamey\Gamey\src'
resolve 'Box2D' in 'C:\Users\nathan.b\Desktop\Gamey\Gamey\src'
  Parsed request is a module
  using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\src doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\node_modules doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\Gamey\src doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\Gamey\node_modules doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\src doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\node_modules doesn't exist or is not a directory
      C:\Users\nathan.b\src doesn't exist or is not a directory
      C:\Users\nathan.b\node_modules doesn't exist or is not a directory
      C:\Users\src doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\src doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\nathan.b\Desktop\Gamey\Gamey\src
        using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules
        using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src/Box2D)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./node_modules/Box2D)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.ts doesn't exist
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.ts doesn't exist
            as directory
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D doesn't exist
            as directory
              existing directory
                using path: C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index
                  using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src/Box2D/index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.js doesn't exist
                    .ts
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.ts doesn't exist
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\src]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\node_modules]
[C:\Users\nathan.b\Desktop\Gamey\src]
[C:\Users\nathan.b\Desktop\Gamey\node_modules]
[C:\Users\nathan.b\Desktop\src]
[C:\Users\nathan.b\Desktop\node_modules]
[C:\Users\nathan.b\src]
[C:\Users\nathan.b\node_modules]
[C:\Users\src]
[C:\Users\node_modules]
[C:\src]
[C:\node_modules]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.js]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.js]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.ts]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.ts]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.js]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.ts]
 @ ./src/index.ts 2:0-31 3:14-26

index.ts:
足以确保没有编译出来。

import * as signalR from "@aspnet/signalr";
import * as box2d from "Box2D";

const g: box2d.b2Vec2 = new box2d.b2Vec2(0, -10)
console.log(g);

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub")
    .build();

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "Box2D": [ "./Box2D/Box2D" ]
    }
  }
}

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "wwwroot"),
        filename: "[name].[chunkhash].js",
        publicPath: "/"
    },
    resolve: {
        extensions: [".js", ".ts"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(["wwwroot/*"]),
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].[chunkhash].css"
        })
    ]
};

项目结构：

Answer 1

所以我终于让它工作了。我必须明确引用 Box2D 库路径。没有 glob 变体起作用（/* 或 **/*），但也许我在那里遗漏了一些东西。

变化：

resolve: {
    modules: ['./src/Box2D', 'node_modules'],
    extensions: [".js", ".ts"]
},

Answer 2

After reading up on webpack module resolution，另一个解决方案是从模块引用切换到绝对或相对路径引用。

变化：
tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "baseUrl": "..",
    "paths": {
      "Box2D": [ "./src/Box2D/Box2D" ]
    }
  }
}

webpack.config.js:
与问题中的相同 - 无需修改。

index.ts:

import * as box2d from "./Box2D/Box2D";

Webpack 无法找到 TypeScript（显然）找到的导入

Webpack is unable to find imports that TypeScript (apparently) finds

box2d

typescript

webpack