웹 팩-dev-server 로 컬 서버 구축 실현

머리말
웹 팩 을 사용 하여 포장 할 때 코드 를 업데이트 할 때마다 다시 포장 해 야 한 다 는 것 을 알 게 되 었 습 니 다.귀 찮 습 니 다.로 컬 에 서버 를 구축 하고 새로운 코드 를 기록 하면 자동 으로 감지 되 기 를 바 랍 니 다.이 럴 때 는 웹 팩-dev-server 를 사용 해 야 합 니 다.
webpack-deb-server
웹 팩 은 선택 할 수 있 는 로 컬 개발 서버 를 제공 합 니 다.이 로 컬 서버 는 node.js 를 기반 으로 구축 되 었 습 니 다.내부 에 express 프레임 워 크 를 사용 하면 우리 가 원 하 는 브 라 우 저 를 자동 으로 새로 고침 하여 수정 한 결 과 를 표시 할 수 있 습 니 다.
그것 은 단독 모듈 이기 때문에 사용 하기 전에 우 리 는 먼저 설치 해 야 합 니 다.명령 은 다음 과 같 습 니 다.

npm install -D webpack-dev-server 

설치 가 끝 난 후에 저 희 는 웹 팩 에서 설정 해 야 합 니 다.설정 대상 은 devserver 이 고 속성 도 많 습 니 다.자주 사용 하 는 몇 가지 속성 은 다음 과 같 습 니 다.

contentBase:어떤 파일 에 로 컬 서 비 스 를 제공 합 니까?기본 값 은 루트 파일 입 니 다.저 희 는 여기에 기입 해 야 합 니 다./dist

port:포트 번호,기본 값 은 8080

inline:페이지 실시 간 리 셋

history ApiFallBack:SPA(단일 페이지 재 활용)페이지 에서 HTML 5 에 의존 하 는 history 모드

webpack.config.js 설정 은 다음 과 같 습 니 다.

module.exports = {
   devServer: {
        contentBase: "./dist",
        inline: true,
    },
}

다음은 package.json 파일 에 script 명령 을 추가 합 니 다.

"scripts": {
    "dev": "webpack serve"
  },

dev 는 개발 환경 을 대표 합 니 다.이상 우리 의 설정 은 완 성 된 셈 입 니 다. 
웹 팩-dev-server 시작 오류
그리고 npm run dev 명령 을 시작 합 니 다.프로그램 에 다음 과 같은 오류 가 발생 했 습 니 다.
Error: Cannot find module 'webpack-cli/bin/config-yargs'
이 유 는 웹 팩-cli 버 전 문제 입 니 다.먼저 저희 버 전 을 살 펴 보 겠 습 니 다.

"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"

해결 방안
웹 팩-cli 버 전 을 4 에서 3 으로 낮 춥 니 다.
1.webpack-cli 마 운 트 해제

npm uninstall webpack-cli

2.설치webpack-cli@3

npm install webpack-cli@3 -D

그리고 시동 을 걸 면 틀 리 지 않 을 것 입 니 다.그러나 이것 은 임시 적 인 해결 방안 일 뿐 입 니 다.우 리 는 두 번 째 해결 방식 을 추천 합 니 다. 
해결 방안
scripts 의 설정 을 변경 하고 원래 웹 팩-dev-serve 를 웹 팩 serve 로 변경 하면 됩 니 다.

"scripts": {
    "dev": "webpack serve --open --mode development"
},

마지막 으로 우 리 는 터미널 에 npm run dev 를 입력 하면 정상적으로 시작 할 수 있 고 웹 페이지 를 자동 으로 열 수 있 습 니 다.왜냐하면 우 리 는 인자 인 open 을 추 가 했 기 때 문 입 니 다.수 동 으로 열 려 면--open 을 꺼 내 면 됩 니 다.
포트 점용 문제 해결
vue+webpack 을 통 해 프로젝트 를 시 작 했 지만 npm run dev 를 다시 실행 했다 면 다음 과 같은 오 류 를 보고 할 것 입 니 다.
Error: listen EADDRINUSE: address already in use 127.0.0.1:8080
이 유 는 우리 가 지난번 에 시작 한 기본 포트 가 8080 이 었 기 때 문 입 니 다.이번 에는 또 하나의 프로젝트 포트 를 시작 하 는 것 이 8080 입 니 다.그러나 8080 포트 는 이미 점용 되 었 습 니 다.해결 방법 은 8080 포트 에 대응 하 는 PID 프로 세 스 번 호 를 죽 이면 됩 니 다.
우선 8080 포트 에 대응 하 는 프로 세 스 ID 찾기

lsof -i:8080

해당 PID 를 찾 으 면 kill 명령 으로 처치 하면 됩 니 다.

kill -9 PID   

웹 팩-dev-server 가 로 컬 서버 를 구축 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 웹 팩-dev-server 가 로 컬 서버 를 구축 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!