😧

webpack-dev-serverからcontentBaseが消えてエラーになる

2022/01/01に公開約1,800字

年末にwebpackの勉強をしていてwebpack-dev-serverを使用しようとしたところ、エラーにぶち当たったので、その時の対処を備忘として(また忘れてやらかしそうなので)残しておきます。

エラー

まず、エラーになった記述がこちら。

webpack.config.js
module.exports = {
  〜省略〜
  // devServer設定
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
  }
};

エラー文

$ webpack serve
[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?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

オプションに不明なプロパティ 'contentBase' があります。って怒られてますね。
なので、どうやらcontentBaseは使えないらしい。。

原因

DevServerのオプションをv3の構成で記述していたことが原因でした。
v4からはcontentBaseからstaticに変更されているようです。

また、contentBase以外にも、以下のオプションがstatic{}配下に移動されています。

  • contentBase
  • contentBasePublicPath
  • serveIndex
  • watchContentBase
  • watchOptions
  • staticOptions

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

対処法

公式のマイグレーションドキュメントであるmigration-v4によると、前述したようにcontentBaseオプションはv4ではstatic{}配下のdirectoryオプションに変更されています。
そのため、以下のように記述することでエラーを回避することができます。

webpack.config.js
module.exports = {
  〜省略〜
  // devServer設定
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
  }
};

参考

https://webpack.js.org/configuration/dev-server/
https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md
https://qiita.com/chocomint_t/items/4bc57945bce081922582
GitHubで編集を提案

Discussion

ログインするとコメントできます