Typescript выдает ошибку форматирования оператора импорта, когда ее нет, потому что веб-пакету нужно такое форматирование. Как это остановить?

Question

Я новичок в машинописи и в веб-пакете, и я пытаюсь настроить проект, чтобы научиться использовать их вместе, но машинопись показывает ошибку, которая не одна.

"./testFunction.ts "часть моего кода выделена как ошибка.

import testFunction from "./testFunction.ts";

console.log("imported function: "+testFunction());

Ошибка: путь импорта не может заканчиваться расширением .ts.Попробуйте вместо этого импортировать «./testFunction» .ts (2691)

Но мне нужно расширение .ts, чтобы веб-пакет обнаружил этот импорт и связал его.Мой webpack.config.js:

    const path = require('path');

    module.exports = {
        mode: "development",
        entry: './src/index.ts',
        devtool: 'inline-source-map',
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: "bundle.js"
        },
        module: {
            rules: [
                { test: /\.txt$/, use: 'raw-loader' },
                { test: /\.tsx?$/, loader: "ts-loader" }
            ]
        }
    };

{test: /.tsx?$/, loader: "ts-loader"} - это то, что сообщает webpack, что загружать с помощью ts-loader, если яопустите расширение, как webpack узнает, что связывать?

Когда я запускаю код с расширением .ts, он работает нормально, без него выдает:

ERROR in ./src/index.ts
Module not found: Error: Can't resolve './testFunction' in '***path***/src'
 @ ./src/index.ts 3:21-46

Это ненаносит урон ошибка, но это раздражает ...

Answer 1

Без указания расширения, Webpack будет искать файл с расширением .js.

Если вы хотите, чтобы он просматривал ваши файлы TypeScript, вам нужно указать Webpack также разрешить .tsи .tsx расширения:

const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: "bundle.js"
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' },
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};