2016-06-07 3 views
1

개발자와 서버 모두에 Grunt와 Webpack을 모두 사용하는 Reunt App을 사용하는 프로젝트에서 Grunt를 제거하려고합니다. 필자는 Grunt의 모든 작업을 Webpack으로 성공적으로 옮겼습니다. 서버 측 코드가 변경 될 때마다 고속 서버를 다시로드하는 것을 제외하고는.webpack-dev-server와 express 서버 모두에서 모듈을 다시로드하는 방법은 무엇입니까?

HMR은 프론트 엔드에서 잘 작동하며, 익스프레스 백엔드 내부에서 webpack-dev-server를 호출하고 WDS 프록시와 링크합니다. 컴파일하지 않고 서버 측 코드 만 다시로드하는 방법을 찾지 못했습니다. React 앱.

nodemon.on ('start', loadWebpackHere)을 청취하는 동안 nodemon을 사용하여 서버 시작 (재시작하지 않음)에서만 webpack을 호출하기 위해 백엔드 코드를 보려고 시도했지만 서버 파일은 보지만 시작 이벤트는 또한 번들링 프로세스가 계속 실행 중입니다.

백엔드 서버에 대한 새로운 webpack 항목을 만들 수 있다고 생각했지만 두 서버를 모두 실행할 수 있는지 확실하지 않습니다.

나는 이것을 달성하는 방법에 대한 기사 나 샘플을 찾지 못했지만 아무도 비슷한 비슷한 것을 설정하지 않았습니까?

+0

['webpack-hot-server-middleware]] (https://github.com/60frames/webpack-hot-server-middleware)가 여러분이 원하는 것일 수 있습니다. 또는 적어도 문서가 서버 측 번들에 대한 하나의 접근법을 설명하는 데 도움이 될 수도 있습니다. – riscarrott

+0

불행히도 여러 가지 구성을 시도했지만 미들웨어 사용에 따른 문제는 API 감시자가 다시 시작되면 API도 다시 작성된다는 것입니다. 그것은 당신이 오늘 오늘 내가 주석을 달았습니다. (필자가 방금 게시 한) 자신의 솔루션을 발견 한 후 그대로 있습니다. 편집 : 오늘 알림을 받았지만 어제 게시했습니다. – edrpls

+0

예 webpack-hot-server-middleware는 webpack 번들을 새로 고침하기 위해 설계된 것입니다. 'nodemon'이 'hot'에 대한 일반적인 접근 방식 인 것처럼 보입니다. 서버가 커지고 잠재적으로 시작이 느려질수록 문제가 될 수 있다고 생각하지만 API를 다시로드합니다. 나는 https://github.com/glenjamin/ultimate-hot-hotloading-example에서 파일 시스템을 보았고 흥미로운 접근 방법 인 require.cache를 무효화했다. – riscarrott

답변

0

HMR을 사용할 수있는 방법을 찾지 못했고 API 변경 사항에 UI 빌드를 트리거하지 않고 webpack으로 API 파일을 볼 수도 있지만 간단한 bash 스크립트로는 앱을 둘러보기가 쉽지 않았습니다.)하지만, 여기까지 :

#!/bin/bash 

if [$NODE_ENV = "testing"] || [$NODE_ENV = "production"] ; then 
    node api/server.js 
else 
    node_modules/.bin/nodemon --watch api api/server.js & 
    node_modules/.bin/webpack-dev-server 
fi 

웹팩 항목으로 API를 추가하여, 아마 더 좋은 방법이있다, 그러나 이것은 나를 잘 역할을한다.

관련 문제