타입스크립트 공부를 위해 typescript + react + wepack 프로젝트 보일러 플레이팅 작업을 하던 중
평소처럼 설정한 웹팩이 평소와 다르게 동작하는 일이 일어났다. (도대체 왜 🤦🏻♀️)
웹팩 개발 서버에 작업 변경사항이 바로 적용되지 않는다 ?
문제
우리 webpack-dev-server는요...
개발 중 소스 코드의 변경 사항을 바로 적용해주어 변경될 때마다 매번 다시 웹팩 명령어를 실행하지 않아도 알아서 다 해주는!
아주 유용한 도구라죠...
그런데 가장 핵심인 이 기능이 동작하지 않는다.
개발자 도구를 열어보면, 콘솔에
[webpack-dev-server] Hot Module Replacement enabled.
[webpack-dev-server] Live Reloading enabled.
라며 웹펙 데브 서버가 자신있게 외치고 있지만, 실제로는 실행되고 있지 않다.
리액트 소스코드를 변경하고 아무리 저장해보아도,
브라우저뿐 아니라 웹팩 데브 서버가 실행되고 있는 터미널에도 아무런 반응이 없다.
그리고 또 다르게 발견한 문제는,
데브서버를 종료하기 위해 ctrl+C를 눌렀는데
[webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...
메세지가 뜨며.. 도대체 얼마나 Graceful하게 종료를 하는지 ^^.. 하루종일 종료만 하고 있다..
뭔가 이상해도 한참 이상하다 얼른 고쳐보자.
해결
이 놈의 웹팩 데브 서버를 고친다고 2일 내내 퇴근하고 노트북 앞에 매달려 있었다.
버전 문제인지.. 설정 파일 문제인지.. 계속 구글링하며 이것저것 고쳐봤지만 계속 해결이 안 되다가... 드디어 해결했다 !
webpack config 파일에 watchOptions 추가
module.exports = merge(common, {
mode: 'development',
devServer: {
host: 'localhost',
port: 3000,
open: true,
historyApiFallback: true,
},
watchOptions: {
poll: true,
ignored: '/node_modules/',
},
...
});
hot에 true 값도 줘보고, live-reload에도 true 값도 줘보고,
웹팩, 웹팩 데브 서버, 웹팩 cli 버전도 변경해보고,
데브서버 켤 때 옵션 커멘드라인도 쳐보고 다 해봤지만
webpack config 파일 중 dev 파일에 watchOptions 옵션 값을 주니 바로 해결되었다.
웹팩의 Watch 옵션 ?
- watch : 웹팩이 파일을 지켜보다가 변화가 생길 때마다 다시 컴파일할 수 있게 해주는 옵션.
(webpack-dev-server에서 watch는 true가 기본 값, 즉 따로 true 값을 설정해줄 필요는 없다) - watchOptions : watch에 대한 추가적인 option을 지정할 수 있는 옵션 (공식문서에서 자세히 확인 가능)
그 중 이번 문제를 해결하게 해 준 ignored 옵션을 보자
몇몇 시스템에서는 파일들을 감시 하는 것이 너무 많은 CPU 메모리를 사용하게 되니, node_modules와 같은 거대한 파일은 이 ignored 옵션을 이용해 웹팩이 감시하지 않도록 설정해주어야 한다는 것이다.
아아. 이제 왜 그렇게 우리의 웹팩 데브 서버가 shutting down 하나 하는 것에도 힘들어 했는지 이해가 되었다.
node_modules가 너무 버거운 탓이었다.
모든 것이 이해가 되며, node_modules를 ignore 하는 설정을 해주니
웹팩 데브 서버는 그 때부터 무언가로부터 해방이 된듯, 프로젝트 소스코드 변경 사항을 바로바로 적용해주었다. 🙆🏻♀️
참고로 내 package.json 내 웹팩 버전은 아래와 같다.
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^4.0.0",
웹팩 데브 서버 실행 스크립트도 특별히 변경한 게 없다.
"scripts": {
"start": "webpack serve",
"build": "rm -rf ./dist && webpack"
}
마치며
예상치 못한 버그가 일어날 때, 그 당시에는 괴롭지만 버그 덕분에 추가적인 웹팩 공부를 할 수 있는 기회가 되었다.
날잡고 웹팩을 공부해야지~ 하는 것보다는 이렇게 그 때 그 때 공부한 게 기억에도 더 잘 남고 공부도 더 잘 되는 것 같다.
왜 웹팩 데브 서버가 저렇게나 node_modules을 감당할 수 없게되었는지는 더 알아봐야할 것 같다.
나와 같은 문제를 겪는 사람들이 나처럼 2일이나 삽질하지 않기를 바라며... 포스팅 끝 !
참고
https://webpack.js.org/configuration/watch/#root
