실시간 컴파일 문제를 해결하기 위한 devServer 구성에 대한 심층 분석

이 기사에서는 실시간 컴파일을 달성하기 위한 devServer 구성과 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. Webpack-dev-server는 주로 Express를 사용하여 Http 서버를 시작합니다. 그것이 모두에게 도움이 되기를 바랍니다.

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

코드를 변경할 때마다 다시 패키징하고 브라우저를 열고 새로 고쳐야 하는데 매우 번거롭습니다

webpackdevserver를 설치하고 사용할 수 있습니다. 이 경험을 개선하세요

webpack-dev-server는 주로 express를 사용하여 Http 서버를 시작합니다. 주요 기능은 리소스 파일을 제공하는 것입니다. 또한, 이 Http 서버와 클라이언트는 원본 파일이 변경된 후 webpack-dev-server에서 실시간으로 컴파일하지만 최종 컴파일된 파일은 원본인 대상 폴더에 출력되지 않는 websocket 통신 프로토콜을 사용합니다. 아래 출력의 구성은 다음과 같습니다. 패키징 후 dist 폴더가 생성되지만 dev-server

output: {
        path: './dist/js',
        filename: 'bundle.js'
    }

를 사용하여 dist 디렉터리가 생성되지 않습니다. 서비스를 시작한 후에는 dist 디렉터리가 사라진 것을 확인할 수 있습니다. 이는 devServer가 그렇지 않기 때문입니다. 패키지된 모듈을 dist 디렉터리에 넣습니다. 대신 속도를 높이려면 설치: npm install webpack-dev-server -D

package.json 수정:

그런 다음 npm을 실행할 수 있습니다. 나중에 서버를 실행해 보세요.

webpack.config.js에서 구성:

교차 도메인: 공동 디버깅 중에 프런트엔드와 백엔드가 분리되며 직접 데이터를 얻으면 도메인을 넘나들게 됩니다. .온라인으로 접속한 후 nginx를 사용하여 개발 중에 webpack을 통해 완료할 수 있습니다.

애플리케이션 시나리오: 이러한 인터페이스에 액세스하면 이전에는 도메인 간 문제가 발생했습니다. 우리는 교차 도메인을 허용하기 위해 server.js에 응답 헤더를 설정하곤 했습니다. 하지만 이제는 devServer 프록시도 사용할 수 있습니다.

1 노드 서비스를 준비하고 프로젝트 루트 디렉터리에 server.js를 생성합니다.

2 webpack.config, js 파일에서 devServer를 구성합니다.

3. axios를 설치하고 항목 파일 index.js에 도입하고 axios를 사용하여 인터페이스 데이터를 요청합니다.

프런트 엔드 브라우저에서 결과를 얻습니다.

Hot 모듈 교체(HMR: hot Module replacement)는 webpack과 함께 제공되는 모듈로 추가 설치가 필요하지 않습니다. Configure hmr:

1) 구성 파일 webpack.config.js 헤더에 webpack을 도입합니다.

const webpack = require("webpack");

2) 추가합니다. 플러그인 구성:

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

3) hmr을 시작하세요

위 구성은 js 핫 업데이트에서 작동하지 않습니다. 업데이트 효과를 얻기 위해 저장할 때 페이지가 계속 새로 고쳐집니다.

두 개가 있습니다. js 및 a.js 파일

b .js에서 1을 반환

b.js를 a.js에 도입하고 데이터 b + 숫자의 실행 결과를 페이지에 씁니다

항목에 index.js 파일을 만들고 npm run server를 실행하세요(핫 업데이트 구성은 변경되지 않았습니다)

그런 다음 페이지를 열고 a.js에서 b() + 1000 값을 변경한 다음 ctrl+s를 다음으로 변경합니다. 저장하고 페이지가 새로 고쳐져 값이 업데이트되는 것을 확인합니다. 이는 분명히 우리가 보고 싶은 것이 아닙니다. js의 핫 업데이트의 경우 항목 파일에서 실행될 파일을 모니터링해야 합니다.

페이지를 새로 고치지 않고 a.js에서 값을 변경한 후 저장합니다. 가장 최근에 계산된 값도 페이지에 표시됩니다

요약: HMR은 기본적으로 CSS 핫 업데이트를 지원하지만 js

에 대한 별도 모니터링이 필요합니다.[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

위 내용은 실시간 컴파일 문제를 해결하기 위한 devServer 구성에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!