댓글 검색 목록

[Nodejs] webpack-dev 서버에 대한 초보자 안내서

페이지 정보

작성자 운영자 작성일 19-12-16 11:24 조회 540 댓글 0

comparison of node server to webpack-dev-server 


노드 백엔드를 실행하는 경우 Webpack을 사용하여 모듈을 번들로 묶을 가능성이 매우 높습니다 (결국 업계 표준 임). 

개발에서 Webpack을 사용했지만 webpack-dev-를 탐색하지 않은 경우 서버 (여기서 게으르기 때문에 여기에서 WDS), 그럼 당신은 치료를 받고 있습니다.


https://itnext.io/sort-of-beginners-guide-to-webpack-dev-server-98f8843b1bc1 


요컨대, WDS는 Webpack의 전용 개발 서버로, 개발 과정을 매끄럽게 만드는 다양한 옵션이 사전 패키지로 제공됩니다. 

핫 모듈 리로딩, gzip 압축 및 코드 분할 / 게으른 로딩과 같은 옵션은 절대적인 바람입니다. 

옵션 태그 아래에 몇 번의 키 입력만으로 볼이 롤링됩니다.


도대체 webpack-dev-server 작동 방식


기본적으로 Node / Express / What-have-you 서버는 응용 프로그램이 많은 작업을 수행하는 곳입니다. 이는 데이터베이스 로직, 비즈니스 로직을 처리하고 하드 디스크에 있는 축소 된 뭉치 번들을 제공합니다. 

반대로 WDS는 프론트 엔드 로직 (JS, CSS, HTML)을 처리합니다. 일종의 "외관"이며 노드 서버의 프록시 역할을 합니다. WDS는 하드 디스크와 달리 컴퓨터의 RAM에있는 번들을 제공합니다. 

이것이 / dist 폴더에서 (또는 번들을 배치하기로 결정한 곳에서) bundle.js를 삭제 한 후에도 여전히 번들이 더 이상 / dist 파일 경로에 없어도 RAM에 유지되기 때문에 개발 모드에서 사이트를 제공합니다.


이것을 이렇게 생각하십시오. 식당에는 수석 요리사와 라인 쿡이 있을 수 있습니다. 아마도 식당의 전체 메뉴는 수석 요리사가 결정했을 것입니다. 그러나 라인 쿡은 여전히 ​​모든 식사를 T에 준비하는 방법을 알고 있습니다. 헤드 쉐프가 휴무 일지라도 라인 쿡은 여전히 ​​모든 식사를 준비하는 방법을 알고 있습니다. 그리고 그들은 창조에 대한 신용을 얻습니다.


혼란스럽거나 혼란스럽거나 다소 혼란스럽습니까? 유튜브는 webpack-dev-server를 검색하고 스스로 설정하고, 이것이 조금 더 이해되기를 바랍니다. 지금까지 나와 함께 있다면 계속해서…

trends comparison of webpack vs competitors 

왜 Webpack이 아파서 많이 사용합니까?


내 소견으로는, 웹팩은 모듈 번들링을 매우 쉽고 매우 커스터마이징 할 수 있게 해줍니다. 내가 좋아하는 옵션 중 일부 :


HTMLwebpackPlugin : HTMLwebpackplugin을 사용하여 기본적으로 기본 특성을 사용하거나 템플리트를 기반으로 index.html 파일을 빌드하십시오.


감시 모드 : "감시"모드에서 Webpack을 실행하여 지속적으로 업데이트를 감시하고 변경 사항이 있을 때 번들을 다시 빌드하십시오.


공통 청크 플러그인 : 두 번들 모두에서 공통 항목의 인스턴스 하나만 렌더링하여 (다중 페이지 앱에서) 여러 번들의 특정 모듈을 사용하는 경우 번들 크기를 최적화 합니다 (기본적으로 각각에 대해 두 번 렌더링 됨)


핫 모듈 리로딩 : 따라서 개발에 도움이 됩니다. DOM의 변경 사항을 관찰하기 위해 서버를 다시 로드 할 필요는 없습니다. 저장시 자동으로 채워집니다. 프론트 엔드 개발 시간이 더욱 빨라집니다.


코드 분할 : 웹팩을 사용하여 코드를 여러 번들로 분할 한 다음 필요할 때 즉시 또는 느리게 로드 할 수 있습니다.


웹팩 — 당신이 보았고 알고 있어야 할 속성


publicPath : dev-server가 번들을 RAM에 저장하고 서비스 할 기본 경로를 지정하고 content-base보다 우선합니다.


contentBase : dev-server가 응용 프로그램을 제공 할 기본 폴더를 지정합니다. 정적 파일을 제공하려는 경우에만 필요합니다.


압축 : 제공되는 모든 항목에 대해 gzip 압축을 사용합니다.


devServer.after : 다른 모든 미들웨어가 코스를 실행 한 후 일부 기능을 실행할 수 있는 기능을 지정합니다.


devServer.before : 다른 모든 미들웨어가 코스를 실행하기 전에 일부 기능을 즐길 수 있는 기능을 지정합니다.


devServer.lazy : 지연 모드를 지정합니다. 번들은 요청 된 경우에만 컴파일 됩니다.


이것은 실제로 빙산의 일각에 불과합니다. 사람들이 더 알고 싶어하고 아주 우스운 물건에 들어가고 싶다면 무언가를 만드십시오. 그리고 문서를 읽으십시오. 



댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.