preact 异步路由器找不到块

Question

我对 react.js（使用 preact）很陌生，运行遇到异步路由问题（preact-async-router）。

我的main.js:

import { h, render } from 'preact';
import {Router, Route} from 'preact-router';
import AsyncRoute from 'preact-async-route';
import Home from './components/home.jsx';

/** @jsx h */

function getHelloWorld(){
    return System.import('./components/hello.jsx').then(module => module.default);
}

render(
    <Router>
        <Route path="/" component={Home} />
        <AsyncRoute path="/hello/:foo" component={getHelloWorld}
        loading={()=>{alert("loading...");}} />
    </Router>
, document.getElementById("app")
);

我的home.jsx:

import {h, Component} from 'preact';
import {Link} from 'preact-router';

/** @jsx h */

export default class Home extends Component {
    render() {
        return <h1>
            This is home page<br/>
            <Link href='/hello/Earth'>Earth</Link>
        </h1>;
    }
}

我的hello.jsx:

import {h, render, Component} from 'preact';

/** @jsx h */

export default class Hello extends Component {
    render() {
        return <h1>Hello {this.props.matches.foo}!</h1>
    }
}

Webpack 创建 bundle.js 和 1.bundle.js（对于 hello.jsx）！

全部在我的资源目录中（资源目录通过 express.static 可用）。

home.jsx 已加载，link 指向 (localhost/hello/Earth)。

现在的问题是 1.bundle.js 没有加载！浏览器（bundle.js）正在请求“/hello/1.bundle.js”下的文件，而不是“/resources/1.bundle.js”！

下的文件

我该如何解决？

编辑：

现在可以了。在我的 webpack 配置中添加了带有“/resources/”的 "publicPath"。谢谢！

Answer 1

@Kian - 似乎您需要在 webpack 配置中将 output.publicPath 设置为“/”。

Answer 2

正如 Jason 所说，看到你在输出中有这个 publicPath，publicPath 指示必须从哪里挑选这些块。

Answer 3

也可以在filename中指定[name]（如果要publicPath留/）：

output: {
    filename: './dist/[name].bundle.js'
},

那么所有的js包文件都会在dist目录

preact 异步路由器找不到块

preact async router doesn't find chunk

javascript

node.js

asynchronous

preact