번들러/웹팩 (2) 썸네일형 리스트형 Webpack Deep Dive Part 1: The Hook 🔎 Webpack Deep Dive Part 1: The Hook (요약)이 글은 Webpack의 소스 코드 이해를 어렵게 만드는 주요 원인으로 Hook 시스템을 꼽고 있으며, Webpack이 Tapable 라이브러리를 통해 Hook을 활용하는 방식과 그로 인해 발생하는 문제점 두 가지를 다룹니다.📌 1. Hook이란?Hook은 특정 이벤트나 함수 호출 시, 미리 정의된 다른 함수들을 실행하는 코드 조각을 의미합니다.쉽게 말해, 하나의 함수가 호출될 때 다른 함수들도 연결되어 실행되도록 만드는 기법입니다.Webpack은 자체적으로 Tapable이라는 Hook 라이브러리를 사용하여 플러그인 시스템을 구축했습니다.📌 2. Webpack의 Hook 사용 방식과 문제점🔴 문제점 1: 불명확한 의존성 (D.. [웹팩] 모듈 페더레이션 - 동작 흐름 정리 ✅ Webpack Module Federation 흐름 재설명요청하신 Module Federation의 동작 과정을 Webpack Compiler의 실행 단계에 따라 vue.config.js 환경에 맞춰 설명ㄱ 📋 Module Federation 동작 과정 요약아래는 Webpack의 Module Federation이 동작하는 전체 흐름입니다 1️⃣ [Webpack Compiler 시작]2️⃣ [ModuleFederationPlugin.apply()]3️⃣ [compiler.hooks.make]4️⃣ [ContainerEntryModule 생성]5️⃣ [remoteEntry.js 생성]6️⃣ [Webpack 런타임에서 remoteEntry.js 로드]7️⃣ [호스트 앱이 리모트 모듈 사용] 각 단계에서.. 이전 1 다음
