我有一个create-react应用程序100%工作，我想集成webpack4来部署我的应用程序，但在配置完webpack后，当我'npm dev-run'时，我在每个延迟导入行上都会收到这些错误：找不到模块：错误：无法解析"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)
})
],
};我的路线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有什么解决方案吗。。
默认情况下，如果你没有给它一个相对/absoute路径，webpack只搜索node_modules，所以你需要把它添加到你的webpack.config.js中，告诉它也在项目根目录中搜索：
module.exports = {
//...
resolve: {
modules: ['.', 'node_modules']
}
};
点击此处了解更多信息。注意，这里的顺序很重要，它首先在项目根目录中搜索，然后在node_modules中搜索，您可以更改它