webpack-dev-serverを利用しているのですがバンドル対象のファイルを変更しても更新されません

Question

状況

qiitaのこちらの記事を参考に環境を構築しました。
以前はうまくいっていたのですが突然更新されなくなりました。webpack,webpack-cli,webpack-dev-serverのバージョンは変わっていません。

webpack-dev-serverで立ち上げたページが更新されない

ログに Compiled successfully.とは出力されていて動いているようには見えるんですがwebpack-dev-server起動時に出力されるページにアクセスすると変更前のまま表示されています。
/src配下のファイルをバンドルして/distに出力する設定です

pacage.json

    "devDependencies": {
        "@babel/core": "^7.12.10",
        "@babel/preset-env": "^7.12.11",
        "@types/fibers": "^3.1.0",
        "@types/html-webpack-plugin": "^3.2.4",
        "@types/node": "^14.14.12",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "@types/sass": "^1.16.0",
        "@types/webpack": "^4.41.25",
        "@types/webpack-dev-server": "^3.11.1",
        "autoprefixer": "^10.1.0",
        "babel-loader": "^8.2.2",
        "babel-plugin-module-resolver": "^4.1.0",
        "css-declaration-sorter": "^6.0.2",
        "css-loader": "^5.0.1",
        "cssnano": "^4.1.10",
        "fibers": "^5.0.0",
        "html-webpack-plugin": "^4.5.1",
        "onchange": "^7.1.0",
        "postcss": "^8.2.1",
        "postcss-loader": "^4.1.0",
        "prettier": "^2.2.1",
        "react-svg-loader": "^3.0.3",
        "sass": "^1.30.0",
        "sass-loader": "^10.1.0",
        "style-loader": "^2.0.0",
        "ts-loader": "^8.0.12",
        "ts-node": "^9.1.1",
        "typescript": "^4.1.3",
        "url-loader": "^4.1.1",
        "webpack": "^5.10.1",
        "webpack-cli": "^4.2.0",
        "webpack-dev-server": "^3.11.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.32",
        "@fortawesome/free-brands-svg-icons": "^5.15.1",
        "@fortawesome/free-solid-svg-icons": "^5.15.1",
        "@fortawesome/react-fontawesome": "^0.1.14",
        "core-js": "^3.8.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "tslib": "^2.0.3"
    }

webpack.config.ts

devServer:{
        historyApiFallback: true,
        contentBase: path.join(__dirname, "dist")
    },

試したこと

webpack.config.tsのdevServerの部分にcontentBase: path.join(__dirname, "dist")を追加しましたが変わりませんでした。
パッケージの再インストール等はしてみましたが治りませんでした。

補足情報（FW/ツールのバージョンなど）

MacOS BigSur
node v15.0.1
yarn 1.22.1
npm 7.5.2

になります。
初質問なので何か足りない部分があれば言っていただけると幸いです。よろしくお願いします。

Comments

[hoshi-takanori]

webpack-dev-server はファイルに出力するのではなく、http でアクセスされた時にビルド結果を返します。
ブラウザからどうやって (どの URL に) アクセスしてますか？

[退会済みユーザー]

返信ありがとうございます。
webpack-dev-serverの起動時に出てくるhttp://localhost:8080にアクセスしています。

Answer 1

よくwebpack.config.tsを参考にしたサイトと見比べてみるとpublicPathの部分が違うことに気づきました。参考にしたサイトに合わせて

const baseURL = process.env.BASE_URL ?? "/";

としてpublicPathに設定したところうまくいきました。