使用 webpack 设置块路径 a 并响应惰性代码拆分答案

【问题标题】：set chunk path a with webpack and react lazy code splitting使用 webpack 设置块路径 a 并响应惰性代码拆分
【发布时间】：2019-08-25 12:56:16
【问题描述】：

我正在使用 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 加载组件？

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

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

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

【讨论】：

酷看起来它适用于本地路径并更改 CDN 的域
我也陷入了这个问题。很高兴它有帮助。 ?