[英]set chunk path a with webpack and react lazy code splitting
I'm using react lazy for route based code splitting as described here: https://reactjs.org/docs/code-splitting.html#route-based-code-splitting 我正在使用React Lazy进行基于路由的代码拆分,如下所述: https : //reactjs.org/docs/code-splitting.html#route-based-code-splitting
My routes file looks like this: 我的路线文件如下所示:
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>
);
When I compile the app it correctly generates 4 JS chunks: 当我编译应用程序时,它会正确生成4个JS块:
app.js
APage.js
BPage.js
APage~BPage.js
however when I navigate to this path: /products/a
, I get these load errors because my component files are located in the root, not in a 'products' folder: 但是,当我导航到以下路径: /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)
How can I configure webpack/react to load components from the root of my site and/or from an external CDN? 如何配置webpack / react以从站点的根目录和/或外部CDN加载组件?
in webpack 's module add output values like this : 在webpack的模块中添加如下输出值:
output: {
publicPath: '/',
path: path.join(__dirname, 'root'),
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.