使用webpack設置塊路徑a並響應延遲代碼拆分

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加載組件？

Answer 1

在webpack的模塊中添加如下輸出值：

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