Блог

Я использую 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 , я получаю эти ошибки загрузки, потому что мои файлы компонентов расположены в корневом каталоге, а не в папке «продукты»:

 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?

в модуле webpack добавьте выходные значения, подобные этому :

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