[React Webpack] : 모듈을 찾을 수 없음 : 오류 : 'C : \ Users \ ....'에서 'src / views / UserList'를 확인할 수 없습니다.

아흐메드 더벨

100 % 작동하는 create-react-app 응용 프로그램이 있습니다. webpack4를 통합하여 앱을 배포하고 싶지만 'npm dev run'할 때 webpack을 구성한 후 모든 지연 가져 오기 행에서 오류가 발생합니다. Module not found : Error : Can '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)
          })
       
     ],
    
    
};

내 route.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

어떤 해결책이라도주세요 ..

Herz3h

기본적으로 webpack node_modules은 상대 / 절대 경로를 제공하지 않은 경우 에만 검색 하므로 webpack.config.js프로젝트 루트 디렉토리에서도 검색하도록 지시하려면 이것을 추가해야합니다 .

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

여기에 더 많은 정보가 있습니다 . 여기서 순서가 중요합니다. 먼저 프로젝트 루트 디렉토리에서 검색 한 다음 node_modules에서 검색하면 변경할 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관