[TIL] webpack dev server에서 페이지 이동시 404에러 발생 해결

토이프로젝트를 하면서 webpack 버전을 4에서 5(^5.73.0)로 업그레이드 하였고, webpack-dev-server도 버전 3에서 4(^4.93.0)로 업그레이드 하였다. 또한 개발 작업시 로컬 환경에서 react-script로 클라이언트를 구동하고는 하였는데, 이를 webpack으로 대체하고자 하였다.

이를 위해 package.json에 기재한 구동 명령어는 다음과 같았다.

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

하지만 문제가 발생하였다.

webpack으로 빌드된 클라이언트의 첫 페이지가 정상적으로 브라우저에 띄워졌지만, 아래와 같이 페이지 이동시에 404(not found) 에러만 화면에 표시되었다.

GET - /경로 404

webpack config 파일에서 devServer 속성들(static, publicPath, devMiddleware 등)을 이리저리 바꿔 보았지만 허사였다. 결과적으로 해결할 수 있는 방법은 historyApiFallback 속성을 true로 정의한 것이었다. 페이지 이동시에 HTML history API를 사용했는데 historyApiFallback 속성 값(default: false)을 true로 바꿔주어 이를 허용해주었다. webpack config 파일에서 정의한 devServer 속성은 아래와 같다.

{
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    },
    historyApiFallback: true,
    port: 3000,
    open: true,
    hot: true
  }
}

출처

1. https://jjnooys.medium.com/webpack-webpack-dev-server-v4-0-0-de24d4e8ee9d
2. ⭐️https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback