[Webpack]Module not foundエラー

パッケージの設定中にエラーが発生しました.6つありますか.
マルチモジュールnot findではwebpack設定に問題があるようです.

こうして3時間も挿入した結果.
私の解決方法を紹介します.
まず、webpackがモジュールを検索する方法を理解します.

Webpackモジュールの検索方法

Webpackがimport App from "./App"のように拡張子を指定しない場合は、
resolve.extensions配列にデフォルトで拡張子を入力して検索します.
resolve.拡張のデフォルト値は['.js', '.json', '.wasm']WebpackはApp.jsApp.jsonApp.wasm順に検索し、ない場合はモジュールがないと判断した場合、返却モジュールにエラーは発生しなかった.
これは私たちの決心です.拡張機能を使用して、デフォルトの配列を再定義できます.
再定義された場合、デフォルトの拡張子はモジュールを解析しません.
TypeScriptと書いてあるので
.tsx, .tsを追加します.

module.exports = {
  entry: "./src/index.tsx",
  resolve: {
    extensions: [".tsx", ".ts"],
  },
  //...
};

さあ、そろそろ帰ります!

何か間違いがあった.
シンプルな設定ですがちょっとパニック
グーグル
モジュールのインポート中にパスに問題が発生しました.
package-lock.jsonとnode modulesを削除し、再
npm iを作れば解決できると言っていましたが、
10回やっても解決しなかった
私は直接その経路に行って書類を調べた.
拡張子は.jsで作りました.
「解析」オプションで選択します.わあ.必要なモジュールを取得できないため、tsxのみがアレイに配置されます.
上記のwebpack検索モジュールの方法を理解すれば、問題は解決します.
デフォルトのシナリオを再定義したからです.
.ts, .これは,tsxのみを解釈し,基本拡張子を解釈できないモジュールのためである.
したがって、...基本拡張子に近づくように修正することができる.

修正済みwebpack.config.jsファイル.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: process.env.NODE_ENV || "development",

  entry: "./src/index.tsx",
  resolve: {
    extensions: [".tsx", ".ts", "..."],
  },
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "/dist"),
  },
  devtool: "eval-source-map",
  devServer: {
    port: 3000,
    open: true,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader", "ts-loader"],
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],
};

TypeScriptを簡単に使うから!
.tsx, .tsを設定すればいいでしょう.これは簡単な考えから生まれた問題です.
今回のエラーをきっかけに、webpackのresolve.extensionsとwebpack이 모듈을 불러오는 방식について正確に知りました.