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已加载，链接指向（localhost / hello / Earth）。

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

我该如何解决？

编辑：

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

Answer 1

@Kian - 似乎你需要将output.publicPath设置为＆＃34; /＆＃34;在你的webpack配置中。

Answer 2

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

Answer 3

您还可以在 filename 中指定[name]（如果您希望 publicPath 保留/）：

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

然后所有js包文件都将在 dist 目录

中