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를 상대경로로 지정한것이 문제였음.
./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,
},