Webpack и Typescript — сбой при импорте объекта с использованием сопоставления путей

#typescript #webpack

#typescript #webpack

Вопрос:

Я пытаюсь импортировать объект, используя сопоставление путей.

При компиляции с использованием tsc он успешно скомпилирован, но при попытке компиляции с использованием webpack я получаю сообщение об ошибке:

Модуль не найден: Ошибка: не удается разрешить ‘@generated / generatedModel’ в ‘C:DevWorktestTssrc «.

Проблема возникла только при попытке импортировать объект.

Импорт интерфейсов работает так, как требуется.

Структура проекта:

 ├── generated
│   ├── generatedInterface.ts
│   └── generatedModel.ts
├── package.json
├── src
│   ├── index.html
│   └── index.ts
├── tsconfig.json
└── webpack.config.js
 

Импортированная модель, которая приводит к сбою сборки — generatedModel.ts:

 export const data = {
    x: 3
}
 

index.ts:

 import {Iinterface} from "@generated/generatedInterface"
import {data} from "@generated/generatedModel"

const foo2 = (x:Iinterface) => x.x   data.x;
 

tsconfig:

 {
  "compilerOptions": {
    "target": "es5",                         
    "module": "commonjs",
    "strict": true,                           
    "baseUrl": ".",
    "paths": {
      "@generated/*": [
        "./generated/*"
      ]
    },
    "esModuleInterop": true,                  
    "skipLibCheck": true,                     
    "forceConsistentCasingInFileNames": true  
  }
}
 

конфигурация webpack:

 const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
 

Попытка компиляции с использованием ts-loader — сбой компиляции.

package.json:

 {
  "name": "testTs",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.12.7",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-typescript": "^7.12.7",
    "babel-loader": "^8.2.1",
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-typescript"
    ]   
  }
}

 

Не могли бы вы помочь, пожалуйста?

Спасибо!!