White Space
WebLife

webpack 5系 で devtool : none を指定できない時の対処法

  • Webpack

webpack 4 から 5 に移行した際、devtool の指定でエラーが出るようになりました。

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

none を指定していたんですが、どうやら^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$にマッチした文字列以外はエラーになるようです。

解決策

webpack 4 の場合

4系では、IS_DEVELOPMENT なら source-map を生成、そうでないなら何もしないという設定にしていました。

devtool: IS_DEVELOPMENT ? 'source-map' : 'none',

webpack 5 の場合

5系 では、noneを指定したい時は devtool オプション自体を指定しない 必要があるようです。そのため、一旦指定しないでおいて if で分岐をかけ、development モードのときだけオプションを追加していく形に変更しました。

module.exports = (env, argv) => {

  const IS_DEVELOPMENT = argv.mode === 'development';

  const configs = { ...最初にいろいろ設定しておく... };

  if (IS_DEVELOPMENT) {
    // development であれば、devtool を追加
    configs.devtool = 'eval-source-map';
  }

  return configs;
}

devtool の設定については結構細かい指定ができるようですが、細かすぎてよくわからないので公式リファレンスを確認してみてください。