웹팩 4 컴파일 과정

1525 단어
웹팩4의 컴파일 과정과 터치할 hooks를 소개합니다.본고는 웹 패키지 컴파일 라인을 간단하게 보여주고 함수명 호출을 통해 hooks와 터치하면 대략적인 절차를 이해할 수 있다.웹 패키지 4 플러그인을 작성하는 당신에게 도움을 주기를 바랍니다.구체적인 실현을 알고 싶으면 원본 코드를 보십시오.
콜과 콜 Async는 이벤트가 웹 패키지 4를 촉발하는 훅스가 웹 패키지/tapable에서 계승된 것입니다.구독, 분배의 관찰자 모델로 간단하게 이해할 수 있다.웹 패키지 내장 플러그인은 컴파일링 프로세스에 이벤트를 등록합니다.훅이 콜되기를 기다리다.우리가 직접 플러그인을 작성하면 다음 임의의 절차점에서 이벤트를 등록해서 컴파일의 결과를 바꿀 수 있습니다.
compiler.run()      

Compiler 객체
  • run()
  • this.hooks.beforeRun.callAsync
  • this.hooks.run.callAsync
  • compile()
  • this.hooks.beforeCompile.callAsync
  • this.hooks.compile.call;
  • new compilation()
  • this.hooks.make.callAsync
  • compilation.finish()
  • compilation.seal
  • this.hooks.afterCompile.callAsync
  • onCompiled
  • this.hooks.shouldEmit.call
  • this.hooks.done.callAsync




  • Compilation 객체(너무 많이...많이 생략--!)
  • this.hooks.finishModules.call
  • this.hooks.seal.call 컴파일링이 시작되었습니다
  • this.hooks.optimize.call 최적화 컴파일링
  • this.hooks.optimizeTree.callAsync 트리의 비동기 최적화
  • this.hooks.afterOptimizeTree.call
  • this.applyModuleIds()
  • this.sortItemsWithModuleIds()
  • this.applyChunkIds()
  • this.sortItemsWithChunkIds()
  • this.createHash()
  • this.hooks.additionalAssets.callAsync
  • this.hooks.optimizeChunkAssets.callAsync

  • this.hooks.afterSeal.callAsync
  • 좋은 웹페이지 즐겨찾기