javascript - 通过 WebPack 将 Bootstrap 加载到 Wordpress 时，ReactJS 代码拆分会导致错误

Question

我目前正在使用 WebPack 配置，该配置允许将 ReactJS 直接注入(inject)到站点中。这会将所有 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'; 这样正常导入的模块，它工作得很好，但是一旦我使用惰性，控制台就开始抛出错误。无论哪种方式，WebPack 都能正确编译。这是控制台错误的屏幕截图:

任何帮助将不胜感激，因为我通常使用 Create-React-App 并且对自定义 WebPack 不太了解。谢谢!

Answer 1

我非常努力地找出问题的根源，结果发现浏览器正在 https://example.com/register/0.js 上寻找 0.js block 。当文件实际上位于 https://example.com/wp-content/themes/theme/build/0.js 时。经过一些谷歌搜索和一些试验和错误之后，我找到了一个 WebPack 配置，可以让它正确编译。如下:

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

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