Ich baue ein Relay-Small-Webpack und eine TypeScript-Demo, um mit ..__ zu spielen. Wenn ich Webpack mit der Datei webpack.config.js starte, erhalte ich diesen Fehler:
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
Ich habe keine Ahnung, was das Problem sein könnte. Der Modulexport sollte korrekt sein.
webpack.config.js
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.js
import { MyModule } from './MyModule';
let mym = new MyModule();
console.log('Demo');
mym.createTool();
console.log(mym.demoTool(3,4));
src/MyModule.ts
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>
Webpack sucht standardmäßig nicht nach .ts
-Dateien. Sie können resolve.extensions
konfigurieren, um nach .ts
zu suchen. Vergessen Sie nicht, auch die Standardwerte hinzuzufügen. Andernfalls werden die meisten Module beschädigt, da sie darauf angewiesen sind, dass die Erweiterung .js
automatisch verwendet wird.
resolve: {
extensions: ['.ts', '.js', '.json']
}
Das hier für die Nachwelt zu lassen, aber ich hatte genau das gleiche Problem und mein Problem war, dass mein Eintrittspfad nicht relativ, sondern absolut war. Ich habe den Eintrag geändert von:
entry: 'entry.ts'
zu
entry: './entry.ts'
Ich habe alle oben genannten Vorschläge ausprobiert und es hat immer noch nicht funktioniert.
Am Ende war das kleinste Detail:
In webpack.js anstelle von:
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
Die Bestellung sollte sein:
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
Ich weiß nicht, warum das so wichtig ist, und um ganz ehrlich zu sein, kümmere ich mich an diesem Punkt ...
Sie verwenden in tsconfig.js - "module": "commonjs", aber in Ihrem Code verwenden Sie das es6-Modul. Ich denke, Sie sollten "Modul" ändern: "ES6".