React suspense 在错误的目录中寻找块答案

【问题标题】：React suspense looks for the chunk in the wrong directoryReact suspense 在错误的目录中寻找块
【发布时间】：2020-04-15 10:27:30
【问题描述】：

我正在尝试使用 webpack 构建一个基本的反应惰性应用程序。它成功创建了块，但是当应用程序运行时，它在错误的目录中查找块，因此，应用程序崩溃。我的构建目录是dist，我将我的 js 文件放在 dist/js 目录中，但它在根目录中查找块（实时服务器的根目录）。这是实现：

首页组件：

import React,{lazy, Suspense} from 'react'
import { render } from 'react-dom'
const Info = lazy(() => import('./Info'))

class Home extends React.Component{
    state = {
        show: false,
    }

    toggleShow = () => this.setState(prevState => ({ show: !prevState.show }));

    render(){
        console.log
        return (
            <div>
                <h1>React lazy - today</h1>
                {this.state.show && (
                    <Suspense fallback={<div>something went wrong</div>}>
                        <Info/>
                    </Suspense>
                )}
                <button onClick={this.toggleShow}>toggle show</button>
            </div>
        )
    };
}

render(<Home/>, document.querySelector('#app'));

信息组件：

import React from 'react'

export default (props) => (
    <div>This is secure information</div>
);

网页包：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/lazy/Home.js'
    },
    output:{
        publicPath: '/',
        path: path.join(__dirname, 'dist/js'),
        filename: '[name].bundle.js'
    },
    module:{
        rules:[
            {
                loader: 'babel-loader',
                test:/\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    plugins:[new CleanWebpackPlugin()],
    mode:'development'
};

问题已解决： 我正在使用实时服务器来运行该应用程序。我尝试了 webpack-dev-server 所以它得到了解决。

【问题讨论】：

当文件夹与使用导入的文件夹位于同一文件夹中时，或者如果它们位于该文件夹的子文件夹中，在其他任何地方出现块错误时，我使用 reactlazy 获得了最佳体验。
@AliAhmadi 它是这样工作的，但是如果块开始增长，它就会变得一团糟
@Jora 您可以添加解决方案作为问题的答案吗？所以 StackOverflow 的同胞不会认为这是一个未回答/未解决的问题。
@PatNeedham 是的，当然。感谢您的建议

标签： javascript reactjs webpack code-splitting react-suspense

【解决方案1】：

问题已解决： 我正在使用实时服务器来运行该应用程序。我尝试了 webpack-dev-server 所以它得到了解决。

【讨论】：