webpack과 번들링 할 때 publicPath로 인해 react-router-dom 프로젝트가 중단됩니다.

Question

Re-router-dom을 사용하는 프로젝트에서 작업 중입니다. 내 웹팩에서

나는 설정 :

output: { 
    filename: 'app.js', 
     path: path.join(__dirname, 'dist'), 
     publicPath: '/' 
}, 
devServer: { 
    historyApiFallback: true 
}... 

내가 경로가 작동하기 위해서는 "/"을 할 publicPath 필요 (을하지 않는 메신저 잘못)

내가 webpack-dev-server --inline --hot --process와 함께 프로젝트를 실행

, 모든 것이 잘 작동합니다.

index.html:11 GET file:///C:/app.js net::ERR_FILE_NOT_FOUND

당신이 프로젝트에 잘 실행으로 너무 빌드가 잘 작동 것 구성하는 올바른 방법 일 것입니다 무슨 알고 있습니까 : 나는 그것을 구축하고 번들 할 때

는하지만,이 오류가 발생합니다 webpack-dev-server?

Answer 1

그래서 여기에 우리가 가서 file:///에서 반응 애플 리케이션을 실행합니다.

1. 변경 index.html 및 번들 파일이 같은 디렉토리에있는 경우, 예를 들어 publicPath: './'을 만드는 output 섹션의 webpack 구성 :

   entry: ... 
   output: { 
       path: path.resolve(__dirname, 'public'), 
       filename: '[name].js', 
       publicPath: './' 
   } 
   

이가에 번들 파일을로드 할 수 있습니다 현재 웹의 루트가 아닌 html과 동일한 디렉토리 (예 : publicPath: '/').

2. 크롬에서 테스트하는 경우 here으로 기술 된 Chrome 확장 프로그램의 '파일 URL에 대한 액세스 허용'을 사용하도록 설정합니다.
3. 라우팅을 사용하는 경우 BrowserRouter (react-router v4와 관련 있음) 대신 HashRouter을 사용하십시오. 자세한 내용은 this SO answer을 참조하십시오.