webpack-dev-serverでデバッグするとコンソールにVMファイルが表示されます

Question

webpack-dev-serverでバンドルされて提供されたjavascriptをChromeでデバッグすると、コンソールの出力は次のような名前と行番号を持つファイルを指します：

VM17562 playground.js:118453

これはソースマップを使用して改善できると思いますか？ ChromeはSource Map Detectedがあると主張しているため、これらはどこかで利用できるはずです。

私はwebpack.config.jsファイルにdebug: trueを持っています。

これらのファイルを使用するためにchromeを使用するには、特別な処理を行う必要がありますので、コンソールで読みやすいソースファイル/行番号を出力できますか？

Answer 1

enable Source Maps in Google Chromeでも可能ですが、デフォルトで有効になっている可能性があります。ソースツールマップのソースタブの左側にあるwebpack：//フォルダに、ソースマップがあります。

あなたのWebPACK構成でdevtool propertyを使用すると、以下の設定から選択できます。