2017-03-10 4 views
0

reactact.js (사전 작업 사용)가 새로 도입되어 비동기 라우팅 (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> 
    } 
} 

웹팩은 bundle.js과 1을 만듭니다. bundle.js (hello.jsx 용)!

내 리소스 - dir (resource-dir은 express.static을 통해 제공됨)에 있습니다.

home.jsx가로드되고 링크가 (localhost/hello/Earth)를 가리 킵니다.

문제는 1.bundle.js가로드되지 않는다는 것입니다. 브라우저 (bundle.js)가 "/hello/1.bundle.js"아래의 파일을 요청하고 "/resources/1.bundle.js"아래에 요청하지 않았습니다!

어떻게 해결할 수 있습니까?

편집 :

이제 작동합니다. 내 webpack 설정에 "/ resources /"와 함께 "publicPath"를 추가했습니다. 고맙습니다!

답변

1

@Kian - webpack 구성에서 output.publicPath를 "/"로 설정해야하는 것처럼 보입니다.

1

제이슨이 말했듯이 출력에서이 publicPath가 있음을 확인하면 publicPath에서 청크를 가져올 위치를 지정합니다.

webpack config