Webpack не может разрешить модули TypeScript

Я строю реле небольшой веб-пакет и TypeScript демо, чтобы играть. Если я запускаю webpack с webpack.конфиг.js я получаю эту ошибку:

ERROR in ./js/app.ts
Module not found: Error: Can't resolve './MyModule' in '/Users/timo/Documents/Dev/Web/02_Tests/webpack_test/js'
 @ ./js/app.ts 3:17-38

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

Структура

webpack.конфиг.Яш 

const path = require('path');

module.exports = {
    entry: './js/app.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {test: /.ts$/, use: 'ts-loader'}
        ]
    }
};

tsconfig.формат JSON 

{
  "compilerOptions": {
        "target": "es5",
        "suppressImplicitAnyIndexErrors": true,
        "strictNullChecks": false,
        "lib": [
            "es5", "es2015.core", "dom"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "dist"
    },
    "include": [
        "js/**/*"
    ]
}

src / app.Яш 

import { MyModule } from './MyModule';

let mym = new MyModule();
console.log('Demo');

mym.createTool();
console.log(mym.demoTool(3,4));

src / MyModule.ТС

export class MyModule {
   createTool() {
    console.log("Test 123");
  }

   demoTool(x:number ,y:number) {
    return x+y;
  }
};

src / index.HTML-код

<html>
    <head>
        <title>Demo</title>
        <base href="/">
    </head>
    <body>
        
        <script src="dist/bundle.js"></script>
    </body>
</html>
8
javascript ts-loader typescript webpack

4 ответов

Webpack не ищет .ts файлов по умолчанию. Вы можете настроить resolve.extensions искать .ts. Не забудьте добавить значения по умолчанию, иначе большинство модулей сломаются, потому что они полагаются на то, что

29
entry: 'entry.ts'

to

entry: './entry.ts'
3

пробовал все предложения выше, и он все еще не работал.

закончилось тем, что мельчайшая деталь:

в webpack.js, вместо:

resolve: {
  extensions: ['.tsx', '.ts', '.js']
},

порядок должен быть:

resolve: {
  extensions: ['.ts', '.tsx', '.js']
},

не знаю, почему это необходимо, и, честно говоря, мне все равно на данный момент...

2

вы используете в tsconfig.js - "module": "commonjs", но в вашем коде вы используете модуль es6. Я думаю, вы должны изменить "модуль": "ES6".

0