使用Webpack和React懒加载进行代码拆分时如何设置块路径？

Question

我正在使用React Lazy进行基于路由的代码分割，如此处所述：https://reactjs.org/docs/code-splitting.html#route-based-code-splitting

我的路由文件如下：

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>
);

当我编译应用程序时，它会正确生成4个JS块。

app.js
APage.js
BPage.js
APage~BPage.js

然而当我访问这个路径：/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/react来从我的网站根目录和/或外部CDN加载组件？

- Cbas

Answer 1

在 webpack 的模块中添加输出值如下：

    output: {
      publicPath: '/',
      path: path.join(__dirname, 'root'),
    }

- Gaurav Singh

---

看起来很酷，可以用于本地路径，并更改CDN的域。 - Cbas

我也曾经卡在这个问题上。很高兴它对你有帮助。 - Gaurav Singh