Question

我构建了一个继电器小型webpack和打字稿演示。如果我使用webpack.config.js运行webpack，我会收到此错误：

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

我不知道问题是什么。模块导出应该是正确的。

Folder Structure

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>

Answer 1

默认情况下，Webpack不会查找.ts个文件。您可以配置resolve.extensions以查找.ts。不要忘记添加默认值，否则大多数模块都会中断，因为它们依赖于自动使用.js扩展名的事实。

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

Answer 2

尝试了上述所有建议，但仍然无效。

结束了最微小的细节：

在webpack.js中，而不是：

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

订购应该是：

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

不知道为什么这是必要的，而且说实话，我不仅仅是在关心这一点......

Answer 3

留下这个给后人，但我有同样的问题，我的问题是我的进入路径不是相对而是绝对的。我改变了参赛作品：

entry: 'entry.ts'

到

entry: './entry.ts'

Answer 4

您在tsconfig.js - ＆＃34; module＆＃34;：＆＃34; commonjs＆＃34;中使用，但在您的代码中使用es6模块。我想，你应该改变＆＃34;模块＆＃34;：＆＃34; ES6＆＃34;。

Answer 5

我使用的是tsconfig而不是webpack，它还将子模块编译为捆绑包（index.js）。

对我来说，问题是我在从外部引用子模块之前忘记编译子模块（即运行tsc来生成index.js）。

Webpack无法解析TypeScript模块

5 个答案: