Javascript 使用webpack设置块路径a并响应惰性代码拆分
我使用react lazy进行基于路由的代码拆分,如下所述: 我的路由文件如下所示:Javascript 使用webpack设置块路径a并响应惰性代码拆分,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,我使用react lazy进行基于路由的代码拆分,如下所述: 我的路由文件如下所示: import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense, lazy } from 'react'; const APage = lazy(() => import(/* webpackChunkName: "APage" */ '../pages/APage')
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const APage = lazy(() => import(/* webpackChunkName: "APage" */ '../pages/APage'));
const BPage = lazy(() => import(/* webpackChunkName: "BPage" */ '../pages/BPage'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/products/a" component={APage}/>
<Route exact path="/products/b" component={BPage}/>
</Switch>
</Suspense>
</Router>
);
但是,当我导航到此路径:/products/a
时,会出现以下加载错误,因为我的组件文件位于根目录中,而不是“products”文件夹中:
http://localhost.com:3000/products/APage~BPage.js net::ERR_ABORTED 404 (Not Found)
http://localhost.com:3000/products/APage.js net::ERR_ABORTED 404 (Not Found)
如何配置webpack/对从我的站点根目录和/或外部CDN加载组件作出反应?在webpack的模块中添加如下输出值:
output: {
publicPath: '/',
path: path.join(__dirname, 'root'),
}
酷毙了,看起来它适用于本地路径,为CDNI更改域也在这个问题上遇到了麻烦。很高兴这有帮助。
output: {
publicPath: '/',
path: path.join(__dirname, 'root'),
}