webpack-dashboard

webpack-dashboard는 webpack dev server의 출력을 더 읽기 쉽고 유용하게 만들기 위해 설계된 webpack용 CLI 대시보드 플러그인입니다. 복잡한 빌드 로그를 스크롤하는 대신, 대시보드와 유사한 터미널 UI를 통해 빌드 정보를 제공합니다. 설치: npm 또는 yarn을 사용하여 개발 의존성으로 로컬에 설치할 수 있습니다: npm install --save-dev webpack-dashboard yarn add --dev webpack-dashboard 또한 모든 프로젝트에서 사용할 수 있도록 전역으로 설치할 수도 있습니다. 사용법: 먼저 플러그인을 임포트하고 webpack 설정에 추가합니다: const DashboardPlugin = require("webpack-dashboard/plugin"); module.exports = { plugins: [new DashboardPlugin()] }; 그 다음, CLI 도구로 dev server 시작 명령어를 감쌉니다. 예를 들어 다음과 같이 변경합니다: "dev": "webpack-dev-server" 를 "dev": "webpack-dashboard -- webpack-dev-server" 로 변경합니다. 동일한 패턴이 node 스크립트나 webpack 직접 실행 시에도 적용됩니다. 커스터마이징: 플러그인은 플러그인과 CLI 도구 간의 통신을 위한 커스텀 포트와 같은 옵션을 허용합니다. 커스텀 포트를 사용하려면 webpack 설정에서 다음과 같이 설정하십시오: new DashboardPlugin({ port: 3001 }) 그 후 CLI에 일치하는 포트를 전달합니다: webpack-dashboard --port 3001 -- webpack 다른 CLI 옵션으로는 ANSI 색상을 위한 --color, 최소 모드를 위한 --minimal, 터미널 창 제목을 설정하는 --title, 문자열 접두사로 표시될 에셋을 제한하는 --include-assets가 있습니다. 플러그인은 또한 host, port, includeAssets 및 handler 옵션을 지원합니다. 지원 플랫폼: macOS는 Terminal, iTerm 2, Hyper에서 지원되며, 터미널 설정에 따라 마우스 이벤트 사용이 가능합니다. Windows 10은 명령 프롬프트, PowerShell, Linux용 Windows 하위 시스템(WSL)에서 작동하지만 마우스 이벤트는 지원되지 않으며, 스크롤에는 화살표 및 페이지 키를 사용합니다. Linux는 Ubuntu 및 Mint와 같은 Debian 기반 배포판의 내장 터미널에서 확인되었으며, 마우스 이벤트와 스크롤이 자동으로 지원됩니다. 유지보수: 이 프로젝트는 Formidable에 의해 활발하게 유지 관리되고 있으며, 버그 보고, 기능 요청 및 풀 리퀘스트를 환영합니다.