javascript - React Suspense 在错误的目录中查找 block

Question

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

主页组件:

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 所以问题就解决了。

Answer 1

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