webpackで自動リロード

前提・実現したいこと

node.js（v14.17.3）、npm(7.20.0)をインストールし、
npm run startを実行するとhttp://localhost:8080/がブラウザで立ち上がるのですが、
その後、htmlに修正を加えるごとに自動的にブラウザがリロードするようにしたいです。
一通りそうなるようにやってみたのですが、自動リロードされません。
どうすればよいでしょうか？

発生している問題・エラーメッセージ

npm run startを実行したときのメッセージです。特にエラーは見当たりません。

terminal
1
2> test002@1.0.0 start
3> webpack serve      
4
5i ｢wds｣: Project is running at http://localhost:8080/
6i ｢wds｣: webpack output is served from /
7i ｢wds｣: Content not from webpack is served from dist
8i ｢wdm｣: wait until bundle finished: /
9i ｢wdm｣: asset main.js 368 KiB [emitted] (name: main)
10runtime modules 1010 bytes 5 modules
11modules by path ./node_modules/ 336 KiB
12  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
13  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
14  modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
15  modules by path ./node_modules/url/ 37.4 KiB 3 modules
16  modules by path ./node_modules/querystring/*.js 4.51 KiB
17    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
18    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
19    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
20modules by path ./src/*.js 303 bytes
21  ./src/index.js 164 bytes [built] [code generated]
22  ./src/sub.js 139 bytes [built] [code generated]
23webpack 5.45.1 compiled successfully in 2270 ms
24i ｢wdm｣: Compiled successfully.

javascript
1　webpack.config.js
2--------------------
3
4module.exports = {
5    // メインとなるJavaScriptファイル（エントリーポイント）
6    entry: `./src/index.js`,
7
8   // モード値を production に設定すると最適化された状態で、
9  // development に設定するとソースマップ有効でJSファイルが出力される
10    mode: "development",
11
12    // ファイルの出力設定
13    output: {
14      //  出力ファイルのディレクトリ名
15      path: `${__dirname}/dist`,
16      // 出力ファイル名
17      filename: "main.js"
18    },
19    // watch: true,
20
21    watchOptions: {
22      // 最初の変更からここで設定した期間に行われた変更は1度の変更の中で処理が行われる
23      aggregateTimeout: 200,
24      // ポーリングの間隔
25      poll: 1000
26    },
27
28    // ローカル開発用環境を立ち上げる
29     // 実行時にブラウザが自動的に localhost を開く    
30    devServer: {
31        contentBase: "dist",
32        open: true
33      }
34  };
35

json
1package.json
2--------------
3{
4  "name": "test002",
5  "version": "1.0.0",
6  "description": "",
7  "main": "index.js",
8  "scripts": {
9    "build": "webpack",
10    "start": "webpack serve",
11    "watch": "webpack --watch",
12    "watch-poll": "mix watch -- --watch-options-poll=1000"
13  },
14  "keywords": [],
15  "author": "",
16  "license": "ISC",
17  "devDependencies": {
18    "webpack": "^5.45.1",
19    "webpack-cli": "^4.7.2",
20    "webpack-dev-server": "^3.11.2"
21  }
22}
23

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8" />
5  <script defer src="main.js"></script>
6</head>
7<body>
8    <h1>テスト</h1>
9    <p>ああああ</p>
10</body>
11</html>

試したこと

ポーリングの記述を追加するとうまくいったという記事があったため追記してみましたが
動作は変わりませんでした。
webpack.config.jsにポーリングの記述を追加しました。

行動規範の内容に同意します

回答1件

ベストアンサー

devServerにwatchContentBaseを追記するとうまく動作するようになるかと思います。

  devServer: {
    contentBase: path.join(__dirname, 'public'),
    open: true,
    watchContentBase: true,
  },

[参考]
https://qiita.com/ymmtmdk/items/e1f54c1de87cbc5f8a5a

投稿2021/07/22 23:29

momotuwo

総合スコア155

skillUp

2021/07/31 04:20

ありがとうございます。対応してみましたが特に変化がありません。色々試行錯誤したいと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！