web-dev-qa-db-ja.com

WebpackはTypeScriptモジュールを解決できません

リレー用の小さなWebパックと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>
javascripttypescriptwebpackts-loader
26
Timo Paul

Webpackはデフォルトで.tsファイルを探しません。 resolve.extensionsを検索するように .ts を構成できます。デフォルト値を追加することも忘れないでください。そうしないと、ほとんどのモジュールは.js拡張が自動的に使用されるという事実に依存するため、壊れます。

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

上記のすべての提案を試みましたが、まだ機能しませんでした。

細部に至るまでになりました：

Webpack.jsでは、次の代わりに：

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

順序は次のとおりです。

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

なぜこれが必要なのかわからない、そして正直に言うと、私はこの時点で思いやりを超えている...

11
Jonathan

後世のためにここに残しましたが、私はこれとまったく同じ問題を抱えていました。私の問題は、私の入場経路が相対的ではなく絶対的だったことです。からエントリを変更しました：

entry: 'entry.ts'

に

entry: './entry.ts'
7
Dana Woodman

Tsconfig.js-"module"： "commonjs"で使用しますが、コードではes6モジュールを使用します。 「モジュール」：「ES6」を変更する必要があると思います。

0
Slawa Eremkin