webpack-dev-serverのオプションからcontentBaseが消えた

前置き

webpack-dev-serverのlatest versionがv4になったのを知らずにv3の構成でwebpack.config.jsを書いたところ、contentBaseオプションが見つからないエラーが起きました。

webpack.config.js

module.exports = {
  ...
  // devServer設定
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    ...
  },
};

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

エラーを見たところ、どうやらv3にはあったcontentBaseオプションは
v4ではvalid propertiesから無くなっているようなので書き直す必要がありそうです。

修正内容

公式のマイグレーションドキュメントmigration-v4を参考に修正していきます。

上記ドキュメントによるとv3のcontentBaseオプションは
v4ではstatic{}配下のdirectoryオプションに変更されたので
以下のように書くことでコンテンツベースを指定することができます。

module.exports = {
  // devServer設定
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    ...
  },
};

この他にも以下のオプションがstatic{}配下に移動されているため、同様のエラーが出たら確認してみましょう。

contentBase/contentBasePublicPath/serveIndex/watchContentBase/watchOptions/staticOptions options were moved to static option:

参考