HM 서비스 센터에서 SpaServices를 사용하여 webpack-bundle을 재 구축하는 방안은 무엇입니까?

Question

Typescript/React/SpaServices/Webpack/HMR이있는 ASP.Net Core를 사용하고 있습니다. tsx 파일을 변경할 때 HMR이 브라우저의 코드를 대체합니다.

어떤 함수/프로그램이 내 파일을보고 변경 사항을 확인한 다음 다시 작성을 트리거합니까? 노드를 사용하여 백그라운드에서 webpack을 실행합니까? 그렇다면 해당 프로세스가 실행 중인지 확인할 수 있습니까? 로그 등?

Answer 1

node를 사용하여 webpack을 백그라운드에서 실행하고 있습니까?

예. 그렇습니다. 여기에 많은 일이 있지만 궁극적으로는 webpack과 webpack-dev-middleware이 모두 처리하고 있습니다.

UseWebpackDevMiddleware으로 시작합니다. 예컨대 :

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions 
{ 
    HotModuleReplacement = true 
}); 

이미, 많은 여기에 무대 뒤에서 벌어지고, 그래서 난 그냥 플레이의 주요 부분에 대한 개요를주지 거기에 말했듯

. 여기 UseWebpackDevMiddleware ( source)에서 코드의 중요한 라인이다 :

nodeServices.InvokeExportAsync<WebpackDevServerInfo>(
    nodeScript.FileName, 
    "createWebpackDevServer", 
    JsonConvert.SerializeObject(devServerOptions)).Result; 

ASP.NET NodeJs 코어와의 통신이 발생하는 곳 InvokeExortAsync 함수이다. nodeServices 변수는 HttpNodeInstance의 인스턴스이며, 이는 OutOfProcessNodeInstance의 하위입니다. 이 때문에 (source)처럼, 건설 있어요 때 OutOfProcessNodeInstance 클래스는 NodeJs 서버를 생성합니다 :

는

_nodeProcess = LaunchNodeProcess(startInfo); 

이는 엔트리 포인트-http.js 스크립트 파일 (source)를 사용하여 NodeJs 서버를 실행 끝납니다. 이것은 많은 코드를 가지고 있지만, 호출이 끝난 후 InvokeExportAsync으로 들어오는 요청을 수신하는 HTTP 서버를 생성합니다. 여기에 호출되는

자바 스크립트 기능, createWebpackDevServer (source)는, 예외 처리 간결함을 제거하여, 다음과 같습니다 호출 을되고있는 createWebpackDevServer에 대한 많은 코드가있다

export function createWebpackDevServer(callback) { 
    let aspNetWebpack = require('aspnet-webpack'); 
    return aspNetWebpack.createWebpackDevServer.apply(this, arguments); 
} 

(source)이므로 여기서 설명하지는 않겠지 만 webpack-dev-middleware (source)를 사용하는 연결 서버 (source)를 실행하는 것으로 끝납니다.

독자가 충분히 탐구 할 수있는 충분한 설명과 출발점이되기를 바랍니다.

Answer 2

• 구성 요소의 상태 변화 : 재 입력 렌더링 구성 요소의 상태가 변경된 경우에만 트리거 될 수 있습니다. 상태는 소품 변경 또는 직접 setState 변경에서 변경할 수 있습니다. 구성 요소는 업데이트 된 상태를 가져오고 구성 요소를 다시 렌더링해야하는지 여부를 결정합니다.
• shouldComponentUpdate 메서드 : 기본적으로 shouldComponentUpdate는 true를 반환합니다. 그것이 항상 모든 것을 업데이트하는 원인입니다.