2018년 12월 10일

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

webpack-dev-server가 느려졌을 때,

일단 내 webpack.config.js의 경우

  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 시작 커멘드가 단순히


"serve": "webpack-dev-server",

이런식으로 되어 있다. 이런… 이를

"serve": "webpack-dev-server --mode development --hot --inline",

위와 같이, hot replacement와 development 모드를 추가하니깐

처음 컴파일만 좀 느리고 아주 빠르게 잘 동작한다.. hot replacement에 대해 원래 알고있었지만 이 문제인줄 모르고 뭐 module부터 이리저리 막 수정했던 내가 바보같음 ㅠㅠ