이번에는 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://
예: 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://
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
