NODE_ENV 검사로 인해 핫로드가 페이지 새로 고침을 일으킬 수 있습니까?

Question

최근에 나는 웹팩-DEV-서버를 통해 DEV를 시작하려면이 스크립트를 사용 , 핫 모듈 다시로드에 대한 프로젝트 설정을 가지고 :

"NODE_ENV=development ./node_modules/.bin/webpack-dev-server --progress --config webpack.dev.js"

뜨거운 모듈을 다시로드 작품. 나는 그런

if (process.env.NODE_ENV === 'development'){ 
    // Original HMR code 
} 

에 뭔가를 변경할 때마다

if (module.hot) { 
    module.hot.accept('./components/App',() => { 
     renderWrapper(App); 
    }); 
} 

을 변경할 때까지, 그것은 전체 페이지를 다시로드되었다.

[HMR] Cannot apply update. Need to do a full reload!

[HMR] Error: Aborted because ./client/containers/SearchBox.jsx is not accepted

Update propagation:
./client/containers/SearchBox.jsx
-> ./client/components/HomePage.jsx
-> ./client/components/App/index.jsx
-> ./client/index.jsx

이유 : 나는 크롬의 콘솔에서 다음과 같은 로그를 발견?

내가 development 체크를하지 않으면 모든 것이 작동합니다.

또한 HMR을 수행하기 위해 확인해야합니까? HMR 블록을 꺼내지 않고 프로덕션 빌드를 만들면 문제가 발생합니까?

Answer 1

상태 바로 전에 console.log(process.env.NODE_ENV)을 수행하면 undefined이 표시됩니다. 그래서 앱이 모듈 업데이트를 잡지 못합니다.

nodejs의 환경에서는 NODE_ENV=development을 설정했지만 webpack의 환경에서는 설정하지 않는 것이 있습니다. 당신의 webpack.config.js에서 플러그인 목록에 다음과 같은 플러그인을 추가 : 이것은 적절한 값으로 클라이언트 코드에 process.env.NODE_ENV를 대체 할 webpack을 말할 것이다

new webpack.DefinePlugin({ 
    process: { 
    env: { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') 
    } 
    } 
}) 

. 위의 예와 같이 JSON.stringify에 포장하는 것을 잊지 마십시오. 자세한 내용은 doc link을 참조하십시오.