Webpack 无法解析 TypeScript 模块答案

【问题标题】：Webpack cant resolve TypeScript modulesWebpack 无法解析 TypeScript 模块
【发布时间】：2017-09-21 13:48:58
【问题描述】：

我构建了一个中继小型 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

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

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>

【问题讨论】：

标签： javascript typescript webpack ts-loader

【解决方案1】：

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

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

【讨论】：

并检查拼写错误 - 在我的情况下，我添加了 ts 和 tsx 但忘记了.tsx开头的点

【解决方案2】：

上面的建议都试过了，还是不行。

最终成为最微小的细节：

在 webpack.js 中，而不是：

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

顺序应该是：

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

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

【讨论】：

“不知道为什么这是必要的，老实说，我现在已经不在乎了......”谢谢你，我的感受正是:-)。跨度>

【解决方案3】：

把这个留给后代，但我遇到了同样的问题，我的问题是我的进入路径不是相对的，而是绝对的。我更改了条目：

entry: 'entry.ts'

到

entry: './entry.ts'

【讨论】：

我在 webpack 4.31.0 上，这就是解决方案！我也有 resolve..extensions... '.ts' 部分，所以我什至可以指定 entry: './entry'
在 webpack 4.41.5 中，我以相反的方式解决了错误，从相对条目变为绝对条目。

【解决方案4】：

我使用 tsconfig 而不是 webpack，它也将子模块编译成一个包 (index.js)。

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

【讨论】：

【解决方案5】：

我参加聚会有点晚了，但最好使用：

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

... 表示我们不会覆盖默认值，只会添加它

【讨论】：