Webpack 无法解析 TypeScript 模块

Question

Webpack 无法解析 TypeScript 模块

92

我建立了一个小的Webpack和TypeScript演示来体验。如果我用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

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

文件夹结构：链接

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>

- Timo Paul

感谢您在问题中包含了所有的文件；如果没有这些文件，我就无法理解一些答案（也不会发现我的项目缺少 webpack 配置 ':D）。 - RobertG

7个回答

60

我尝试了上面所有的建议，但它仍然没有起作用。

最终是一个微小的细节问题：

在 webpack.js 中，应该使用以下代码而不是原来的代码：

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

顺序应为：

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

不知道为什么这是必需的，而且说实话，我现在已经超出关心的范围了...

- Jonathan

11

不知道为什么这是必要的，老实说，我现在已经不再关心了……谢谢你表达了我的情绪 :-). - AntonOfTheWoods

1

对我来说没有任何影响。 - alekop

1

谢谢你，我简直不敢相信原来只是一个随意的东西阻止了它的工作。无法表达今天这个问题给我带来的挫败感，所以感谢你添加了这个答案。 - Stu Horsfield

15

为了留作纪念，我将这里的内容保留下来。但是我遇到了与楼主完全相同的问题，我的问题在于入口路径不是相对路径而是绝对路径。我将entry从以下内容更改为：

entry: 'entry.ts'

到

entry: './entry.ts'

- Dana Woodman

2

我正在使用webpack 4.31.0，这是解决方案！我也有resolve.extensions中的'.ts'部分，因此我甚至可以指定entry：'./entry'。 - Dimitry K

在webpack 4.41.5中，我以相反的方式解决了错误，从相对入口转为绝对入口。 - Chris Panayotoff

6

我来晚了，但更好的做法是使用：

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

...的意思是我们不会覆盖默认值，只会添加到它上面。

- Lucas Noetzold

1

我正在使用tsconfig代替webpack，它也将子模块编译成一个包（index.js）。

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

- Nic Scozzaro

1

在我的情况下，这个问题已经解决了。

import Foo from "../Foo.ts";

不是

import Foo from "../Foo";

- DYS

0

对我来说，问题在于我需要升级node和npm。

- coberlin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Jungo · Accepted Answer

Webpack默认不会查找.ts文件。你可以配置resolve.extensions来查找.ts文件。别忘了添加默认值，否则大多数模块都会出问题，因为它们依赖于自动使用.js扩展名的事实。

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