[Javascript] 웹팩 변경사항 바로바로 적용하기 (webpack-dev-server)

 
 
 

npm i -D webpack-dev-server

일단 데브디펜던시로 webpack-dev-server를 받는다.
 
 
 

  devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },

기존 webpack.config.js에 devServer 설정부분을 추가해준다.
 
 
 

기존에 빌드했던 dist 폴더 제거
 

  "scripts": {
    "dev": "webpack serve --env development"
  },

package.json내 스크립트 부분 변경
 
 

npm run dev

npm run dev를 이용해 다시 빌드를 해주고 
 
 
 

컴파일이 완료됐다는걸 터미널에서 확인한 후
 
 
localhost:8080으로 이동하면 

이제 새로 빌드 하지않고 바로바로 변경사항을 확인할 수 있다.