webpack dev serverでhtmlをlivereloadしたかった

これで。watchContentBase: trueがポイント。

webpack.config.js

const path = require('path');

module.exports = {
   entry: "./client/main.js",
   output: {
      path: path.resolve(__dirname, 'public/assets'),
      filename: "bundle.js"
   },
   devServer: {
      contentBase: path.resolve(__dirname, "public"),
      publicPath: '/assets/',
      watchContentBase: true
   },
   devtool: "source-map",
};

ディレクトリ構成はこんな感じ。

./
├── client
│   └── main.js
├── package.json
├── public
│   ├── assets
│   │   ├── bundle.js
│   │   └── bundle.js.map
│   └── index.html
├── webpack.config.js
└── yarn.lock

設定内容は、

• build.jsはpublic/assetsに出力
• localhost:8080のルートをoutput.contentBaseでpublicディレクトリに設定
• build.jsの出力先(public/assets)をlocalhost:8080/assetsで見れるようにdevServer.publicPathを設定
• devServer.watchContentBaseでpublicディレクトリをlivereload対象にする
• index.htmlではassets/bundle.jsを読むようにする

これでlocalhost:8080/がlivereloadされる。