在 Webpack 导出的库中使用动态导入

Question

我正在通过 Webpack 将 React 组件导出为库。在该库中，我有几个React.lazy()执行动态导入的调用：

库.tsx：

import React from 'react';
const ComponentCheap = React.lazy(() => import('./ComponentCheap/index');
const ComponentExpensive = React.lazy(() => import('./ComponentExpensive/expensive');
export default function LibComponent(props) {
    return (<div>
        <Suspense fallback="Loading...">
            (props.useExpensive ? <ComponentExpensive /> : <ComponentCheap />)
        </Suspense>
    </div>)
}

该库又被React.lazy()加载到消费应用程序中：

应用程序.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
const LibComponent = React.lazy(() => import('@mystuff/library'));

ReactDOM.render((
    <Suspense fallback="Loading...">
        <LibComponent />
    </Suspense>
), document.body);

问题是：当 webpack 生成库包时，它正确地分割ComponentCheap成ComponentExpensive单独的块，正确放置在库文件中，但生成代码来加载这些块，就好像它们位于应用程序的根目录上一样：

var ComponentCheap = react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(function () { return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./ComponentCheap/index */ "./src/ComponentCheap/index.tsx")); });
var ComponentExpensive = react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(function () { return __webpack_require__.e(/*! import() */ 1).then(__webpack_require__.bind(null, /*! ./ComponentExpensive/index */ "./src/ComponentExpensive/index.tsx")); });

在根应用程序上，这正是发生的情况 -React.lazy()执行加载并尝试获取http://<domainname>/0.index.js和http://<domainname>/1.index.js，而不是应有的正确库路径。

目前这是否是 Webpack 中的一个错误/缺陷，因为库根本不支持在内部使用动态导入，或者我需要在 Webpack 配置中执行某些操作才能启用此功能？我是否需要在库的 Webpack 配置中发出信号，表明它也在与主模块一起导出块？应用程序是否需要在其自己的 Webpack 配置中设置某些内容才能获取这些块？