webpack-dev-server 4.x

broccoli·2022년 9월 5일
0

webpack

목록 보기
2/2

webpack-dev-server 는 현재 4.x 버전이다.
기존에 3.x 버전으로 작성시에 hot reload가 제대로 동작 못하거나 번들된 파일을 찾지 못하는 경우가 있을 수 있다. (404)

아직도 이유는 잘 모르겠지만 삽질후에 결과론적으로 수정을 할 수 있었다.

v3 -> v4로 변경하는 과정은 공식사이트에 잘 표현되어있다. 이것을 참조하기 바람
https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

원인확인하는 과정

왜 메모리에 번들된 파일을 찾지 못할까? 싶을땐 일단 writeToDisk 옵션을 써서 파일이 있는경우엔 제대로 로딩하는지 확인해본다. 나같은 경우는 이경우엔 잘 확인 되어 더 의문이었음.

문제는 devMiddleware에 publicPath를 상대경로로 지정한것이 문제였음.

수정본

  1. devMiddelwart에 publicPath도 ./dist되어있던 부분을 전부 /dist로 변경함.
// webpack.config.js
...
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
    publicPath: "./dist",
  },
  devServer: {
    devMiddleware: {
      index: true,
      publicPath: "/dist",
    },
    static: { directory: path.resolve(__dirname) },
    port: 3333,
  },
profile
🌃브로콜리한 개발자🌟

0개의 댓글