ReactJS Code Splitting 在通过 WebPack 将 Bootstrap 加载到 Wordpress 时导致错误

Question

我目前正在使用允许将 ReactJS 直接注入站点的 WebPack 配置。这会将所有 React 代码编译成一个 index.js，我正在尝试对其进行代码拆分，因为文件变得非常大。没有代码拆分，bootstrap 不会加载，因为我将它作为我的 WordPress 主题的一部分。但是，当我使用 React.lazy() 时，我收到 0.js 的 404 错误，我的开发人员工具说这是由 bootstrap 引起的。这是我的 index.js:

const Register = lazy(() => import('./components/register/register')); // Import function

以及渲染：

<Suspense fallback={<div><Loader/></div>}><div id="container"><Register /></div></Suspense>

像 import Register from './components/register/register'; 这样正常导入的模块工作得很好，但是一旦我使用 lazy，控制台就开始抛出错误。无论哪种方式，WebPack 都能正确编译。这是控制台错误的屏幕截图：

任何帮助将不胜感激，因为我通常使用 Create-React-App 并且对自定义 WebPack 知之甚少。谢谢！

Answer 1

我非常努力地找出问题的根源，结果发现浏览器正在寻找 https://example.com/register/0.js when the file was in fact sitting at https://example.com/wp-content/themes/theme/build/0.js 上的 0.js 块。一些 google 搜索和一些试验和错误之后我想出了一个 WebPack 配置，可以正确编译。如下：

output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '/wp-content/themes/theme/build/'
    },

只是记录一下，以防其他人遇到同样的问题。

ReactJS Code Splitting 在通过 WebPack 将 Bootstrap 加载到 Wordpress 时导致错误

ReactJS Code Splitting causes an error when loading Bootstrap through WebPack into Wordpress

javascript

wordpress

lazy-loading

reactjs

webpack