WebStorm + webpackerのデバッグ

Question

こんにちは、StackOverflowコミュニティ！

私のチームは、いくつかの部分が反応して書かれた「ruby on rails」プロジェクトに取り組んでいます。私たちはwebpacker gemを使ってjsファイルをパックにまとめています。

WebStormをプロジェクトで使用するように設定しようとしていますが、私はデバッガに問題があります。ウェブストームはブレークポイントを打つことはありません。 別の端末インスタンスにrails sと./bin/webpack-dev-serverを起動し、Chrome拡張機能がインストールされ、JavaScriptのデバッグ設定が作成され、反応アプリが存在するビュー（ポート3000上）が表示されます。また、ウェブパック構成にdevtool: 'eval'を追加しました。クロム開発ツールでは、webpack://ソースを参照して、ブレークポイントを正常に設定できます。

ブレークポイントが機能するようにこのツールを設定するにはどうすればよいですか？

Answer 1

通常、webpackにバンドルされているアプリケーションのデバッグには、ソースマップが正しく生成されていることを確認するだけです。最良の選択はdevtool: 'source-map'です（https://webpack.js.org/configuration/devtool/参照）。 evalソースマップは正確ではなく、デバッグにはあまり適していません（品質は「元のコード」ではなく「生成されたコード」です）。 詳細については、https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/を参照してURLマッピングを指定する必要がある場合もあります。 しかし、webpackを何十もの方法で設定できるように、各設定ごとに機能する一般的な手順はありません。だから、あなたがデバッグしようとしているプロジェクトを提供しない限り、正確な手順について助言することはほとんどありません