Webpack无法解析TypeScript模块

Tim*_*aul 29 javascript typescript webpack ts-loader

我构建了一个继电器小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
Run Code Online (Sandbox Code Playgroud)

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

文件夹结构

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'}
        ]
    }
};
Run Code Online (Sandbox Code Playgroud)

tsconfig.json

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

SRC/app.js

import { MyModule } from './MyModule';

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

mym.createTool();
console.log(mym.demoTool(3,4));
Run Code Online (Sandbox Code Playgroud)

SRC/MyModule.ts

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

   demoTool(x:number ,y:number) {
    return x+y;
  }
};
Run Code Online (Sandbox Code Playgroud)

SRC/index.html的

<html>
    <head>
        <title>Demo</title>
        <base href="/">
    </head>
    <body>
        
        <script src="dist/bundle.js"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

Mic*_*ngo 81

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

resolve: {
    extensions: ['.ts', '.js', '.json']
}
Run Code Online (Sandbox Code Playgroud)

  • 并检查拼写错误 - 在我的例子中,我添加了 ts 和 tsx,但忘记了“.tsx”开头的点 (6认同)

Jon*_*han 14

尝试了以上所有建议,但仍然无法正常工作。

最终成为最微小的细节:

在webpack.js中,而不是:

resolve: {
  extensions: ['.tsx', '.ts', '.js']
},
Run Code Online (Sandbox Code Playgroud)

订购应为:

resolve: {
  extensions: ['.ts', '.tsx', '.js']
},
Run Code Online (Sandbox Code Playgroud)

不知道为什么这样做是必要的,老实说,我现在不在乎...

  • “不知道为什么这是必要的,说实话,我现在已经不在乎了......”谢谢你,我的观点正是:-)。 (12认同)

Dan*_*man 7

留下这个给后人,但我有同样的问题,我的问题是我的进入路径不是相对而是绝对的.我更改了以下内容:

entry: 'entry.ts'
Run Code Online (Sandbox Code Playgroud)

entry: './entry.ts'
Run Code Online (Sandbox Code Playgroud)

  • 我在 webpack 4.31.0 上,这就是解决方案!我有 resolve..extensions... '.ts' 部分,所以我什至可以指定 `entry: './entry'` (2认同)

Luc*_*old 6

我参加聚会有点晚了,但最好使用:

resolve: {
    extensions: ['.jsx', '.ts', '.tsx', '...']
}
Run Code Online (Sandbox Code Playgroud)

...意味着我们不会覆盖默认值,只会添加它