코드, 데이터 및 QR 도구

Webpack 설정 생성기

단일 JavaScript 진입점과 출력 디렉터리를 지정하여 범위가 제한된 CommonJS 시작 설정을 만드세요. webpack.config.cjs를 복사하거나 내려받아 프로젝트에서 검토하세요.

브라우저에서 로컬 처리가입 불필요개인정보 안내 ↗

Webpack 5와 webpack-dev-server 5용입니다. 사용 전에 의존성 버전과 프로젝트를 검토하세요. 빌드를 실행하거나 검증하지 않습니다.

사용 방법

사용 방법

  1. 상대 진입 및 출력 경로, 모드, 포트, 공개 경로를 설정합니다.
  2. 생성한 설정과 의존성 안내를 검토합니다.
  3. 복사 또는 다운로드 후 호환 의존성을 설치하고 자신의 프로젝트에서 확인합니다.

버전과 의존성 범위

Webpack 5와 webpack-dev-server 5용입니다. webpack-cli, babel-loader, @babel/core, @babel/preset-env, style-loader, css-loader가 필요합니다. 호환되는 패키지와 Node.js 버전을 선택하세요. 도구는 패키지를 설치하지 않습니다.

시작 설정의 한계

JavaScript 진입점 하나만 지원합니다. JSX, TypeScript, HTML 생성, CSS 추출, 프레임워크 프리셋, 배포 설정은 포함하지 않습니다. 개발 서버는 public 디렉터리를 제공하므로 공개 경로에서 bundle을 참조하는 HTML을 준비하세요. 운영 모드만으로 운영 준비가 완료되지 않습니다. 빌드와 의존성 호환성은 검증하지 않습니다.

로컬 생성

상대 경로는 제한된 ASCII 문자만 허용하며 상위 디렉터리 구간은 금지됩니다. 포트는 1024–65535이며 공개 경로는 auto 또는 /로 시작하고 끝나는 디렉터리입니다. 텍스트만 생성하며 프로젝트 파일을 읽거나 서버를 시작하지 않습니다.

자주 묻는 질문

더 알아보기

왜 .cjs 파일인가요?

CommonJS require와 module.exports를 사용합니다. .cjs는 type: module 프로젝트에서도 형식을 명확히 합니다.

생성한 빌드의 성공을 보장하나요?

아니요. 시작 설정입니다. 경로와 HTML, 호환 의존성을 확인하고 직접 프로젝트 빌드를 실행하세요.