[React Webpack]: Module not found: Error: Can't resolve 'src/views/UserList' in 'C:\Users\....'

Question

我有一个 create-react-app 应用程序 100% 工作，我想集成 webpack4 来部署我的应用程序，但是当我 'npm dev run' 配置 webpack 后，我在每个惰性导入行上都遇到了这些错误：找不到模块：错误：无法解析 'C:....'

中的 'src/views/UserList'

我的 webpack.config.js :

// webpack.config.js
const path = require( 'path' );
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const webpack=require('webpack');

module.exports = {
    context: __dirname,
    entry: {
        bundle: './src/index.js',
        
      },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
   },
   devServer: {
    historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.((c|sa|sc)ss)$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|j?g|svg|gif)?$/,
                use: 'file-loader',
                include: path.resolve(__dirname, 'src')
             }
        ]
    },
    plugins: [
        
        new HtmlWebPackPlugin({
           template: path.resolve( __dirname, 'public/index.html' ),
           filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
          })
       
     ],
    
    
};

我的routes.js:

/* eslint-disable react/no-multi-comp */
/* eslint-disable react/display-name */
import React, { lazy } from 'react';
import { Redirect } from 'react-router-dom';
import AuthLayout from './layouts/Auth';
import ErrorLayout from './layouts/Error';
import DashboardLayout from './layouts/Dashboard';
import DashboardView from './views/Dashboard';

export default [
  {
    path: '/',
    exact: true,
    component: () => <Redirect to="/dashboard" />
  },
  {
    path: '/auth',
    component: AuthLayout,
    routes: [
      {
        path: '/auth/login',
        exact: true,
        component: lazy(() => import('src/views/Login'))
      },
      {
        component: () => <Redirect to="/errors/error-404" />
      }
    ]
  },
  {
    path: '/errors',
    component: ErrorLayout,
    routes: [
      {
        path: '/errors/error-403',
        exact: true,
        component: lazy(() => import('src/views/Error403'))
      },
      {
        path: '/errors/error-404',
        exact: true,
        component: lazy(() => import('src/views/Error404'))
      },
      {
        path: '/errors/error-500',
        exact: true,
        component: lazy(() => import('src/views/Error500'))
      },
      {
        component: () => <Redirect to="/errors/error-404" />
      }
    ]
  },
  {
    route: '*',
    component: DashboardLayout,
    routes: [
      {
        path: '/dashboard',
        exact: true,
        component: DashboardView
      },
      {
        path: '/users',
        exact: true,
        component: lazy(() => import('src/views/UserList'))
      },
      {
        path: '/brands',
        exact: true,
        component: lazy(() => import('src/views/BrandList'))
      },
      {
        path: '/brands/new',
        exact: true,
        component: lazy(() => import('src/views/BrandForm/index'))
      },
      {
        path: '/brands/:id',
        exact: true,
        component: lazy(() => import('src/views/BrandDetails'))
      },
      {
        path: '/users/new',
        exact: true,
        component: lazy(() => import('src/views/AddUser'))
      },
      {
        path: '/users/:id',
        exact: true,
        component: lazy(() => import('src/views/UserDetails'))
      },
      {
        path: '/users/:id/:tab',
        exact: true,
        component: lazy(() => import('src/views/UserDetails'))
      },
      {
        path: '/users/:id/:tab/:itemId',
        exact: true,
        component: lazy(() => import('src/views/ItemDetails'))
      },
      {
        path: '/service-partners/providers',
        exact: true,
        component: lazy(() => import('src/views/ProviderList'))
      },
      {
        path: '/service-partners/providers/:id',
        exact: true,
        component: lazy(() => import('src/views/ProviderDetails'))
      },
      {
        path: '/service-partners/services',
        exact: true,
        component: lazy(() => import('src/views/ServiceList'))
      },
      {
        path: '/service-partners/services/:id',
        exact: true,
        component: lazy(() => import('src/views/ServiceDetails'))
      },
      {
        path: '/service-partners/categories',
        exact: true,
        component: lazy(() => import('src/views/ServiceCategoryList'))
      },
      {
        path: '/feeds',
        exact: true,
        component: lazy(() => import('src/views/PersonalFeedList'))
      },
      {
        path: '/feeds/:id',
        exact: true,
        component: lazy(() => import('src/views/PersonalFeedDetails'))
      },
      {
        component: () => <Redirect to="/errors/error-404" />
      }
    ]
  }
];

应用结构：

public/
  index.html

src/
  views/
  components/
  index.js
  routes.js

请提供任何解决方案..

Answer 1

默认情况下，webpack 只搜索 node_modules 如果你不给它一个 relative/absoute 路径，所以你需要将它添加到你的 webpack.config.js 告诉它在项目中搜索根目录：

module.exports = {
  //...
  resolve: {
    modules: ['.', 'node_modules']
  }
};

更多信息here。注意这里的顺序很重要，它首先在项目根目录中搜索然后node_modules，你可以更改它。

[React Webpack]: Module not found: Error: Can't resolve 'src/views/UserList' in 'C:\Users\....'

[React Webpack]: Module not found: Error: Can't resolve 'src/views/UserList' in 'C:\Users\....'

lazy-loading

reactjs

webpack