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
어떤 해결책이라도주세요 ..
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다