ReactJS中Webpack报错：模块未找到错误：无法解析'src/content/Login/LoginAuthentication'。

Question

我正在我的React js项目中使用Web "webpack": "^5.74.0"。

当我运行npm start时，webpack会抛出以下错误。

ERROR in ./src/layouts/SidebarLayout/Sidebar/SidebarMenu/items.ts 21:0-83
Module not found: Error: Can't resolve 'src/content/Login/LoginAuthentication' in 'E:\project\src\layouts\SidebarLayout\Sidebar\SidebarMenu'
 @ ./src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx 7:0-32 77:14-27
 @ ./src/layouts/SidebarLayout/Sidebar/index.tsx 10:0-40 40:32-43 56:34-45
 @ ./src/layouts/SidebarLayout/index.tsx 7:0-32 24:33-40
 @ ./src/router/PrivateRoute.tsx 11:0-53 135:29-42 148:29-42 167:29-42 234:29-42 259:29-42
 @ ./src/router/index.tsx 4:0-42 5:13-25
 @ ./src/App.tsx 5:0-30 17:33-39
 @ ./src/index.tsx 4:0-24 18:36-39

当我像这样导入任何东西时，webpack 会抛出错误：'src/content/Login/LoginAuthentication'

当我像这样导入时，没有错误：'../../folder1/filename'

以下是webpack配置文件：

const path =require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin')
const DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
module.exports={
    entry:path.resolve(__dirname,'..','./src/index.tsx'),
    resolve:{
        extensions:['.tsx','.ts','.js']
    },
    
    module:{
        rules:[{
            test:/\.(ts|js)x?$/,
            exclude:/node_modules/,
            use:[
                {
                    loader:'babel-loader'
                }
            ]
        },{
            test:/\.(sass|css|scss)$/,
            use:['style-loader','css-loader']
        }, {
            test: /\.(png|svg|jpg|jpeg|gif)/,
            type: 'asset/resource'
          },{
            test: /\.(png|svg|jpg|jpeg|gif)/,
            type: 'asset/inline'
          }
          
        //   ,{
        //     test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
        //     exclude: /node_modules/,
        //     use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
        //   }
        
        ]
    },
    output:{
        path:path.resolve(__dirname,'..','./dist'),
        filename:'bundle.js'
    },
  
    plugins:[new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'..','./public/index.html')
    })
    ]
}

有没有解决这个问题的方法？我不能改变导入因为导入太多了。

- ajith kumar

---

你找到问题了吗？我也遇到了同样的问题，但不知道原因。 - Dilakv

Answer 1

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

    module.exports = {
      entry: path.resolve(__dirname, "src", "index.js"),
      resolve:{
        extensions:['','.js','.jsx']
    },
      output: {
        path:path.resolve(__dirname, "dist"),
      },
      module: {
        rules: [
          {
            test: /\.js$|jsx/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react']
              }
            },
          },{
            test: /\.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              "style-loader",
              // Translates CSS into CommonJS
              "css-loader",
              // Compiles Sass to CSS
              "sass-loader",
            ],
          },{
            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },{
            test: /\.(png|jp(e*)g|svg|gif|webp)$/,
            use: ['file-loader'],
          },{
            test: /\.svg$/,
            use: ['@svgr/webpack'],
          },
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
        template: path.join(__dirname, "public", "index.html"),
        }),
      ],
    
    
    }

改变扩展和入口点路径的方式对我很有帮助。

如果你关注入口点并解析扩展，你就能观察到差异。

如果有人能详细解释这种行为，我会非常感激。

希望这能帮到你，谢谢。

- Kushal Davda