网站搜索

typescript - 无法使用 webpack 解析子模块


我目前正在尝试通过 webpack 运行 @microsoft/signalr npm 包,并使用 import * as signalR from '@microsoft/signalr' 导入模块。我收到的错误信息,据我理解,本质上是 webpack 无法解析模块内部的路径,因为所有“缺失”的模块都是 signalr 的一部分(我不知道该如何称呼它们)。运行 webpack 显示如下:

日志

assets by status 271 KiB [cached] 2 assets
orphan modules 589 KiB [orphan] 558 modules
runtime modules 937 bytes 4 modules
cacheable modules 598 KiB
  modules by path ./src/ 589 KiB
    ./src/ts/index.ts + 558 modules 589 KiB [built] [code generated]
    ./src/scss/style.scss 376 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/style.scss 301 bytes [built] [code generated]
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]

WARNING in ./src/ts/app.ts 11:29-57
export 'HubConnectionBuilder' (imported as 'signalR') was not found in '@microsoft/signalr' (module has no exports)
 @ ./src/ts/index.ts 1:0-24 2:0-9

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 3:0-63
Module not found: Error: Can't resolve './Errors' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './Errors' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/Errors)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Errors doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Errorsjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Errors.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Errors.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Errors.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Errors doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 4:0-56
Module not found: Error: Can't resolve './HttpClient' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './HttpClient' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/HttpClient)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HttpClient doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HttpClientjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HttpClient.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HttpClient.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HttpClient.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HttpClient doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 5:0-56
Module not found: Error: Can't resolve './DefaultHttpClient' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './DefaultHttpClient' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/DefaultHttpClient)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\DefaultHttpClient doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\DefaultHttpClientjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\DefaultHttpClient.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\DefaultHttpClient.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\DefaultHttpClient.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\DefaultHttpClient doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 6:0-68
Module not found: Error: Can't resolve './HubConnection' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './HubConnection' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/HubConnection)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnection doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnectionjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnection.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnection.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnection.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnection doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 7:0-62
Module not found: Error: Can't resolve './HubConnectionBuilder' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './HubConnectionBuilder' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/HubConnectionBuilder)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnectionBuilder doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnectionBuilderjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnectionBuilder.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnectionBuilder.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnectionBuilder.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\HubConnectionBuilder doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 8:0-45
Module not found: Error: Can't resolve './IHubProtocol' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './IHubProtocol' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/IHubProtocol)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\IHubProtocol doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\IHubProtocoljs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\IHubProtocol.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\IHubProtocol.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\IHubProtocol.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\IHubProtocol doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 9:0-37
Module not found: Error: Can't resolve './ILogger' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './ILogger' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/ILogger)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ILogger doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ILoggerjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ILogger.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ILogger.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ILogger.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ILogger doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 10:0-65
Module not found: Error: Can't resolve './ITransport' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './ITransport' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/ITransport)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ITransport doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ITransportjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ITransport.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ITransport.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ITransport.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\ITransport doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 11:0-39
Module not found: Error: Can't resolve './Loggers' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './Loggers' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/Loggers)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Loggers doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Loggersjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Loggers.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Loggers.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Loggers.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Loggers doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 12:0-52
Module not found: Error: Can't resolve './JsonHubProtocol' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './JsonHubProtocol' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/JsonHubProtocol)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\JsonHubProtocol doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\JsonHubProtocoljs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\JsonHubProtocol.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\JsonHubProtocol.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\JsonHubProtocol.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\JsonHubProtocol doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 13:0-36
Module not found: Error: Can't resolve './Subject' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './Subject' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/Subject)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Subject doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Subjectjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Subject.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Subject.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Subject.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Subject doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

ERROR in ./node_modules/@microsoft/signalr/dist/esm/index.js 14:0-34
Module not found: Error: Can't resolve './Utils' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
resolve './Utils' in '__PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm'
  using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: __PROJECT_DIR__\node_modules\@microsoft\signalr\package.json (relative path: ./dist/esm/Utils)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Utils doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Utilsjs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Utils.ts doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Utils.html doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Utils.scss doesn't exist
      as directory
        __PROJECT_DIR__\node_modules\@microsoft\signalr\dist\esm\Utils doesn't exist
 @ ./src/ts/app.ts 2:0-46 11:29-57
 @ ./src/ts/index.ts 1:0-24 2:0-9

webpack 5.21.2 compiled with 12 errors and 2 warnings in 9571 ms

我已经尝试过的事情:

  • 删除 node_modules 并重新运行 npm i
  • 将导入语句更改为直接导入子模块,例如 import { HubConnectionBuilder } from '@microsoft/signalr/dist/esm';

我现在已经到了连要搜索什么都不知道的地步。我的“重要”项目配置:

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: ['./src/ts/index.ts', './src/scss/style.scss'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  target: 'web',
  module: {
    rules: [{
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
      ],
      exclude: /node_modules/,
    },
    {
      test: /\.ts$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Awesome App',
      template: 'src/html/app.html',
      inject: 'body',
    }),
  ],
  optimization: {
    minimize: true,
  },
  resolve: {
    extensions: ['js', '.ts', '.html', '.scss'],
    modules: ['node_modules'],
  },
};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
  },
  "files":[
    "./node_modules/@types/webpack/index.d.ts"
  ],
  "exclude": [ "node_modules" ]
}

package.json 依赖摘录

  "devDependencies": {
    "@types/webpack": "^4.41.26",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "copyfiles": "^2.4.1",
    "css-loader": "^5.0.2",
    "eslint": "^7.18.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "extract-loader": "^5.1.0",
    "fibers": "^5.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.0.0",
    "node-sass": "^5.0.0",
    "nodemon": "^2.0.7",
    "sass": "^1.32.5",
    "sass-loader": "^11.0.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.15",
    "typescript": "^4.1.3",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@microsoft/signalr": "^5.0.2",
    "@types/d3": "^6.3.0",
    "@types/node": "^14.14.25",
    "d3": "^6.5.0"
  }

答案#1

事实证明,我在解析部分的判断是正确的。webpack.config.js 中的 resolve 选项缺少一个单独的 .,应该是 extensions: ['.js', ...] 而不是 extensions: ['js', ...]。