😧
webpack-dev-serverからcontentBaseが消えてエラーになる
年末に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'),
},
}
};
参考
Discussion