집 > 기사 > 웹 프론트엔드 > webpack-dev-server 사용법에 대한 자세한 설명(코드 포함)

webpack-dev-server 사용법에 대한 자세한 설명(코드 포함)

php中世界最好的语言원래의: 2018-04-20 14:08:022684검색

이번에는 webpack-dev-server 사용법(코드 포함)에 대해 자세히 설명하고, webpack-dev-server 사용 시 주의사항은 무엇인지 살펴보겠습니다.

webpack-dev-server

webpack-dev-server는 webpack-dev-middleware를 사용하여 webpack 패키지를 제공하는 소규모 Node.js Express 서버입니다. 서버의 마이크로 런타임입니다.

다음 구성 파일(webpack.config.js)

var path = require("path");
module.exports = {
 entry:{
 app:["./app/main.js"]
 },
 output:{
 path:path.resolve(dirname,"build"),
 publicPath:"/assets/",
 filename:"bundle.js"
}
}

을 살펴보겠습니다. 여기에서 소스 파일을 앱 폴더 아래에 넣고 webpack 패키지를 빌드 아래의 Bundle.js에 전달합니다. 폴더.

참고: webpack-dev-server는 독립적인 NPM 패키지이므로 npm install webpack-dev-server를 통해 설치할 수 있습니다.

기본 디렉터리

webpack-dev-server는 현재 디렉터리를

webpack-dev-server --content-base build/

위 명령은 명령줄에서 실행되며 빌드 디렉터리를 루트 디렉터리로 사용한다는 점에 유의하세요. webpack-dev-server에서 생성된 패키지입니다. 실제 디렉터리가 아니라 메모리에 있습니다.

기본 디렉터리에 새 index.html 파일을 만든 다음 브라우저에 http://를 입력합니다. localhost:8080 방문.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="assets/bundle.js"></script>
</body>
</html>

자동 새로 고침

webpack-dev-server는 페이지를 자동으로 새로 고치는 두 가지 모드를 지원합니다.

iframe 모드(페이지가 iframe에 배치되고 변경 사항이 발생하면 다시 로드됨)
inline 모드(webpack의 클라이언트 항목 추가- dev-sever에서 번들로)

두 모드 모두 핫 모듈 교체를 지원합니다. 핫 모듈 교체의 장점은 페이지를 다시 로드하는 대신 업데이트만 부분적으로 교체된다는 것입니다.

iframe 모드
이 모드를 사용하는 데에는 추가 구성이 필요하지 않습니다. , 다음 URL 형식으로만 액세스하면 됩니다.

http://:/webpack -dev-server/

예: http://localhost:8080/webpack- dev-server/index.html.

인라인 모드

인라인 모드, 우리가 액세스하는 URL은 변경할 필요가 없습니다. 활성화하세요. 이 모드에는 두 가지 상황이 있습니다.

1 다음에서 webpack-dev-server를 시작할 때

webpack.config의 명령줄
에 --inline 명령을 추가합니다. js

2에 devServer:{inline:true}를 추가합니다. Node.js API로 webpack-dev-server를 시작하려면 다음 두 가지 작업도 수행해야 합니다.

webpack-dev-server 인라인 옵션에 구성이 없으므로 webpack-dev-server/client를 추가해야 합니까? http://:/를 webpack 구성의 진입점으로 설정합니다.