Webpack 대 webpack-dev-server 대 webpack-dev-middleware 대 webpack-hot-middleware 대 etc

나는 작업을 시작하고 webpackA를 node/express개발 환경 ReactJS과 서버 측 렌더링 응용 프로그램을 react-router. dev 및 prod (런타임) 환경에서 각 웹팩 패키지의 역할에 대해 매우 혼란 스럽습니다.

내 이해에 대한 요약은 다음과 같습니다.

webpack: 웹 애플리케이션의 여러 부분을 결합한 다음 단일 .js 파일 (일반적으로 bundle.js)로 묶는 패키지 인 도구 입니다. 결과 파일은 응용 프로그램에서로드 할 prod 환경에서 제공되며 코드를 실행하는 데 필요한 모든 구성 요소를 포함합니다. 기능에는 코드 축소, 축소 등이 포함됩니다.

webpack-dev-server: 웹 사이트 파일을 처리 하는 서버 를 제공하는 패키지입니다 . 또한 bundle.js클라이언트 구성 요소에서 단일 .js 파일 ( )을 빌드 하지만 메모리에서 제공합니다. 또한 -hot모든 빌드 파일을 모니터링하고 코드 변경시 메모리에 새 번들을 빌드하는 옵션 ( )이 있습니다. 서버는 브라우저에서 직접 제공됩니다 (예 :) http:/localhost:8080/webpack-dev-server/whatever. 인 메모리 로딩, 핫 프로세싱 및 브라우저 서비스의 조합을 통해 사용자는 코드가 변경 될 때 브라우저에서 애플리케이션을 업데이트 할 수 있으므로 개발 환경에 이상적입니다.

위의 내용에 의문이 있으시면 아래 내용이 확실하지 않으니 필요한 경우 알려 주시기 바랍니다.

webpack-dev-serverwith node/express을 (를 webpack-dev-server) 사용할 때 일반적인 문제 는있는 그대로 서버라는 것입니다 node/express. 따라서이 환경은 클라이언트와 일부 노드 / 익스프레스 코드 (API 등)를 모두 실행하기가 까다 롭습니다. 참고 : 이것은 내가 직면 한 문제이지만 더 자세히 설명하는 이유를 이해하면 좋을 것입니다.

webpack-dev-middleware: webpack-dev-server(인 메모리 번들링, 핫 리로딩) 과 동일한 기능을 가진 미들웨어 이지만 server/express애플리케이션에 삽입 할 수있는 형식입니다 . 그런 식으로 webpack-dev-server노드 서버 내부에 일종의 서버 ( )가 있습니다. 죄송합니다 : 이건 미친 꿈인가요 ??? 이 작품은 어떻게 개발 및 생산 방정식을 풀고 삶을 더 단순하게 만들 수 있습니까?

webpack-hot-middleware:이 ... 여기에 갇혀 ... 찾고있을 때이 조각을 찾았 webpack-dev-middleware습니다. 사용 방법을 모릅니다.

ENDNOTE : 죄송합니다. 잘못된 생각이 있습니다. 복잡한 환경에서 이러한 변종을 이해하려면 정말 도움이 필요합니다. 편한 경우 전체 시나리오를 구축 할 패키지 / 데이터를 더 추가하십시오.

webpack

설명했듯이 Webpack은 모듈 번 들러이며 주로 브라우저에서 실행할 수 있도록 다양한 모듈 형식을 번들로 제공합니다. CLI 와 Node API를 모두 제공합니다 .

webpack-dev-middleware

Webpack Dev Middleware는 개발 중에 번들 의 최신 컴파일 을 제공하기 위해 익스프레스 서버에 마운트 할 수있는 미들웨어입니다 . 이것은 감시 모드webpack 에서의 Node API 를 사용하고 파일 시스템에 출력하는 대신 메모리에 출력합니다 .

비교를 위해 express.static프로덕션에서이 미들웨어 대신 비슷한 것을 사용할 수 있습니다 .

webpack-dev-server

Webpack Dev Server는 그 자체로 최신 번들을 제공하고 클라이언트에서 라이브 모듈 업데이트에 대한 HMR (핫 모듈 교체) 요청을 추가로 처리 하는 데 사용 하는 익스프레스 서버 입니다 webpack-dev-middleware.

webpack-hot-middleware

Webpack Hot Middleware는 대안 webpack-dev-server이지만 서버 자체를 시작하는 대신 기존 / 사용자 정의 Express 서버에 함께 마운트 할 수 있습니다 webpack-dev-middleware.

또한...

webpack-hot-server-middleware

더 많은 것을 혼동 하기 위해, 서버 렌더링 앱의 핫 모듈 교체를 처리 webpack-dev-middleware하고 함께 사용하도록 설계된 Webpack Hot Server Middleware도 있습니다 webpack-hot-middleware.

2018 년 업데이트 기준으로 공식 GitHub 페이지 의 webpack-dev-server 참고 사항을 고려합니다 .

유지 보수중인 프로젝트 webpack-dev-server는 현재 유지 보수 전용 모드이며 가까운 시일 내에 추가 기능을 허용하지 않을 것입니다. 대부분의 새로운 기능 요청은 Express 미들웨어로 수행 할 수 있습니다. 문서에서 이전 및 이후 후크 사용을 살펴보십시오.

웹팩 HMR을 구축하기위한 자연스러운 선택은 무엇입니까?