webpack-dev-serverの自動更新が動かない

はじめに

ファイル構成をちょっと変えたときにwebpack-dev-serverのホットリロードが全く動かなくなった

webpack-dev-serverのauto-reloadでハマったこと を読んだら、ファイル構成を変えて(index.htmlをbundle.jsの出力先と同じ階層に置く？)解決していたが、自分はファイル構成変えたくなかったので調べた

なんとなく「webpack-dev-server 自動更新 されない」とかで解決策が出てきにくい気がしたので残しておく

環境

ファイル構成

project
  |--dist
  |   |--index.html
  |   |--js
  |      |--bundle.js (出力されるjs)
  |--src
  |   |--js
  |      |---index.js (バンドルするjs)
  |      |---module.js (indexで読み込むmodule)
  |--webpack.config.js

package.json (略)

package.json

  "scripts": {
    "start": "webpack-dev-server --open",
    "watch": "webpack --watch",
  },

  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

webpack.config.js (略)

webpack.config.js

const path = require('path');
const outputPath = path.resolve(__dirname,'dist/js');
const webpack = require('webpack');

module.exports = {
    entry: './src/js/index.js', // エントリポイント

    output: {
        path: outputPath,
        filename: 'bundle.js' // バンドル後のファイル
    },

    devServer: {
        contentBase: path.resolve(__dirname, 'dist/'),
        inline: true,
        hot: true
    }
}

module.js

module.js

export default function hello(){
  console.log('Hello, webpack!!');
}

これをindex.jsでimportしている

実行

$ npm run watch

$ npm start

この状態でmodule.jsを適当に変更

module.js

export default function hello(){
// console.log('Hello, webpack!!');
   console.log('Reloaded');
}

これでホットリロードを期待してたけどなぜか動かない

解決策

webpack.config.jsのoutputにpublicPathを追加したら動くようになった

webpack.config.js

// ~~~~~~~~~~~~~~~~~~~~~~~ //
module.exports = {

    output: {
        path: outputPath,
+       publicPath: '/js/',
        filename: 'bundle.js'
    },

// ~~~~~~~~~~~~~~~~~~~~~~~ //

publicPathとは？

ここに詳しく書いてあるような気がする

Webpackの "publicPath"は何をするのですか？
- https://www.it-swarm.dev/ja/javascript/webpack%E3%81%AE-publicpath%E3%81%AF%E4%BD%95%E3%82%92%E3%81%99%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/1050990542/