[Webpack] webpack-dev-server 가 느려졌을때

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부터 이리저리 막 수정했던 내가 바보같음 ㅠㅠ