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

问题描述

我目前正在使用WebPack配置，该配置允许将ReactJS直接注入站点。这会将所有React代码编译成一个index.js，由于文件越来越大，我尝试对代码进行拆分。没有代码拆分，引导程序将不会加载，因为我将其作为wordpress主题的一部分。但是当我使用React.lazy（）时，我的开发人员工具说0.js出现404错误是由引导程序引起的。这是我的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不太了解。谢谢！

解决方法

我非常努力地找出问题的根源，结果发现浏览器在https://example.com/register/0.js上实际上是位于{{ 3}}。一些Google搜索和一些反复试验之后，我弄清楚了一个WebPack配置，可以使它正确编译。如下：

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

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