집 > 기사 > 웹 프론트엔드 > Webpack에서 핫 새로 고침 및 핫 로딩을 올바르게 사용하는 방법

Webpack에서 핫 새로 고침 및 핫 로딩을 올바르게 사용하는 방법

php中世界最好的语言원래의: 2018-05-25 14:51:341603검색

이번에는 웹팩에서 핫 리프레시와 핫 로딩을 올바르게 사용하는 방법을 알려드리겠습니다. 웹팩에서 핫 리프레시와 핫 로딩을 사용할 때 주의사항은 무엇인가요?

스캐폴딩에서 핫 새로 고침과 핫 로딩의 차이점을 알아보세요

대부분의 vue 개발자는 vue-cli로 시작한다고 생각합니다. 많은 초보자가 vue 프로젝트를 즐겁게 실행하지만 vue-cli 구성을 마음대로 변경할 수는 없습니다. webpack은 실제로 매우 복잡하며 vue-cli도 초보자를 위한 경험을 최적화하기 위해 많은 작업을 수행했습니다.

반대로, React는 상대적으로 견고한 스캐폴딩을 제공하지 않습니다(적어도 제가 분명히 발견한 것은 아닙니다. 여러분이 제게 깨달아주셨으면 좋겠습니다). 내가 아는 한, 그 중 하나는 yeoman의 Generator-react-webpack, React의 create-react-app 및 좋은 React-starter-kit(핫 로딩, 많이 참조되는 많은 코드 통합)입니다.
React를 배울 때 위에서 언급한 처음 두 개의 React 스캐폴드가 핫 로딩이 아닌 핫 새로 고침을 제공한다는 것을 발견했습니다.

핫 로딩과 핫 새로 고침의 간단한 구분:

핫 새로 고침: 파일이 내부적으로 변경된 후 어떤 상태도 유지하지 않고 전체 페이지가 새로 고쳐집니다(예: 콘텐츠가 입력된 입력 양식). 새로고침
핫 로딩: 파일이 변경된 후 변경된 영역이 최소한의 비용으로 변경됩니다. 파일을 변경하기 전 상태를 유지해 보세요(입력 내용 입력 후 다른 태그의 코드 수정)

둘 다 기존 개발(수동 F5)에 비해 개발 경험이 향상되었지만 둘 사이에는 여전히 차이점이 있습니다. 매우 규모가 크며, 특히 프로젝트가 더욱 복잡해짐에 따라 우리는 이 문제를 완전히 해결해야 합니다(버그 개발에 더 많은 시간을 투자).

직접 수정

처음부터 구성하는 것은 또 다른 영역이므로 vue-cli에서 직접 변경을 시작합니다.

다음 단계는 영감 참조를 위한 키만 나열합니다. 자세한 내용은 최종 github 전체 프로젝트를 참조하세요

Deletevue 관련 종속성, 파일 등은 전체 scr을 삭제할 수 있습니다.
package.babel-loader webpack-dev-server React-hot-loader에 json 종속성을 추가합니다(가장 중요)
package.json 명령줄 설정 "dev": "webpack-dev-server --inline -- Progress --config build /webpack.dev.conf.js"
webpack.base.conf .jsx 파일 추가는 babel-loader로 처리해야 하며 옵션 구성: {plugins:['react-hot-loader/ babel']}
.babelrc 사전 설정이 반응에 추가되고 플러그인이 아래에 추가됩니다: ['react-hot-loader/babel']
src 폴더에 main.js를 생성합니다(이름은 webpack에서 구성한

과 일치)

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';
import App from './pages/App'; // 自己写吧
import './assets/css/reset.scss';
// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));
export default hot(module)(App); // 热加载的关键

이 시점에서 우리는 React를 사용하여 핫 로딩의 즐거움을 즐겁게 경험할 수 있습니다~

문제

는 실제로 main.js를 간단히 수정하는 것입니다. 관련 코드를 반응하기 위해 vue-cli에 파일을 저장하고(jsx를 처리하도록 babel을 구성하는 것을 잊지 마세요) 계속해서 핫 리프레시를 수행합니다.

로컬 코드를 관찰하고 비교한 결과 매력적인 이름을 찾았습니다.

webpack.dev.conf 파일에서:

new webpack.HotModuleReplacementPlugin()

온라인 검색 후

이것이 핫 로딩을 달성하는 열쇠라는 것을 알게 되었습니다. 코드 자체는

모듈화(세 가지 주요 프레임워크와 같이 재사용 가능한 구성 요소를 작성할 수 있는 모든 프레임워크가 이 속성을 활용할 수 있음을 의미)의 특성을 갖고 있으므로 코드를 연결하거나 분리하여 핫 로딩을 달성할 수 있습니다. 반응의 jsx 특수 효과는 HotModuleReplacementPlugin으로 처리할 수 없으며 핫 새로 고침만 가능합니다.

이 경우, React-hot-loader가 나올 예정입니다. 공식적인 사용 방법에 따라 계속해서 핫 리로딩을 사용할 수 있습니다.

ps: 참고용으로 저도 많은 리액트 코드를 탐색하고 학습하고 있습니다

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 관련 기사를 주목해 주세요. PHP 중국어 웹사이트!