webpack-dev-server가 느려졌을 때,
일단 내 webpack.config.js의 경우
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | devServer: { contentBase: path.publicDir, stats: "normal", compress: true, clientLogLevel: "warning", filename: "[name].[hash].js", host: 0.0.0.0, port: 9444, disableHostCheck: true, hot: true, historyApiFallback: { disableDotRule: true }, headers: { "Access-Control-Allow-Origin": "*" } } |
이런식으로 되있다.
최근에 webpack 3 -> 4로 업글하면서 아니 무슨 html하나만 바꿔도 re-compile하는데 1~2분 걸리니 정말 말도 안되게 작업하기가 너무 힘들었다.
그래서 확인해보니.. 내 package.json의 dev server 시작 커멘드가 단순히
1 | "serve": "webpack-dev-server", |
이런식으로 되어 있다. 이런… 이를
1 | "serve": "webpack-dev-server --mode development --hot --inline", |
위와 같이, hot replacement와 development 모드를 추가하니깐
처음 컴파일만 좀 느리고 아주 빠르게 잘 동작한다.. hot replacement에 대해 원래 알고있었지만 이 문제인줄 모르고 뭐 module부터 이리저리 막 수정했던 내가 바보같음 ㅠㅠ