preact异步路由器找不到块

Question

我对react.js (使用preact)非常陌生，并且遇到了异步路由(preact-异步路由器)的问题。

我的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)！

所有在我的资源-dir(资源-dir是通过express.static可用)。

加载了home.jsx，链接指向(localhost/hello/Earth)。

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

我怎么才能解决呢？

编辑：

现在起作用了。在我的webpack配置中添加"publicPath“和"/resources/”。谢谢!

Answer 1

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

Answer 2

正如Jason所说，要确保输出中有这个publicPath，publicPath指导必须从哪些块中选择这些块。

​

​

Answer 3

还可以在文件名中指定名称(如果希望publicPath保留/)：

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

那么所有js包文件都将位于dist目录中。