webpack エラーの原因が分かりません。

Question

前提・実現したいこと

webpack初心者です。
npx webpackで実行したのですがエラーが出ます。
webpack.config.jsファイルを作ってからエラーが出ました。

設定ファイルを編集しているのですがググっても
エラーの原因が分かりません。

webpack-cliに問題があるのでしょうか？
詳しい方教えてください。
お願いいたします。

発生している問題・エラーメッセージ

PS C:\Users\81907\Desktop\workspace\tmp> npx webpack
[webpack-cli] 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.

webpack.config.jsのコードになります。

module.exports = {
  mode: "development",
  devtool: 'none'
}

Answer 1

エラーメッセージに書かれているとおりです。devtool: 'none'はWebpack 5では通りません。

devtool: 自体を書かなければソースマップなしになります。

Comments

[oyu]

ご回答ありがとうございます。
こちらの動画を見ながら進めておりますが情報が古いってことでしょうか？
https://www.youtube.com/watch?v=RKG0VTlRtPU&list=PLC_Jqbgu7I6baxP0oHxMXtTh7nBGGwqfM&index=3

[maisumakun]

package.jsonでのバージョン指定はどのようになっていますでしょうか？

（npx webpackとだけ書くと、暗黙のうちに最新版、今で言えば5が使われます）

[maisumakun]

（ソフトが直接出すエラーメッセージより動画の方を信じる、という気持ちがよくわからないです）

[oyu]

package.jsonのコードになります。
{
"name": "tmp",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^5.5.1",
"webpack-cli": "^4.2.0"
}
}

[maisumakun]

> 情報が古いってことでしょうか？

（Webpackではないですが）公式のリポジトリにあったreadmeすら誤っていたことがありますし、今回の場合はエラーメッセージを読めば理由は明らかですから、まず信じるべきはエラーメッセージです。

[oyu]

実行するには
yarn run webpackでよろしいのでしょうか？

[oyu]

すみません。
エラーをググったのですが分かりませんでした。

[maisumakun]

> エラーをググったのですが分かりませんでした。

英語として読んでください。

[maisumakun]

えっと、上に書いた「devtools:の行自体を消す」という対応はやってみたのですか？

[maisumakun]

https://webpack.js.org/configuration/devtool/ こちらにもあるように、「none」と明示的に指定することはできません。

[oyu]

お聞きしてすぐに消したのですが
このようなエラーが出ました。

PS C:\Users\81907\Desktop\workspace\tmp> npx webpack
[webpack-cli] Compilation finished
asset main.js 644 bytes [emitted] (name: main)

ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Users\81907\Desktop\workspace\tmp'

webpack 5.5.1 compiled with 1 error in 46 ms

[maisumakun]

とりあえず、質問のエラーは解決しています。

[oyu]

ありがとうございます。
エラーのググり方はどのように調べればいいのでしょうか？