webpackアプリケーションを効率的にデバッグする方法は？

Question

私は自分のプロジェクトでwebpack dev serverを採用しようとしています。私はそれが広く採用されていることを知っているので、アプリケーションのデバッグはかなり難しいようです。 webpackはデフォルトで1つの巨大バンドルを生成するので、ソースマップは必須です。例えば時間があり、全体のスタックトレースは次のようになり、元のマップは、いくつかのスタックトレース（eval-source-map）をマッピングするために使用される（eval）を解析するのが遅いかどうかのどちらかである、devtoolモードに応じて、

：私は彼らと大きな問題を抱えています：
at eval (eval at <anonymous> http://localhost:8082/js/app.js:2004:2), <anonymous>:43:67)。
また、console.traceまたはconsole.errorを手動で呼び出すと、出力はマップされません。したがって、sourcemapped-stacktraceのようなツールを使用する必要があります。これは遅く、エラーを起こしやすいです。

現在、私は非常に簡単にアプリケーションをデバッグすることができるため、require.jsを使用しています。それぞれのスタックトレースが正しいファイルと行を指しています。

webpackでどのように同じ結果を達成できますか？

EDIT：グーグルクロームで
関連問題：Firefoxでhttps://code.google.com/p/chromium/issues/detail?id=376409

関連問題：あなたはデベロッパーツールを使用してください https://bugzilla.mozilla.org/show_bug.cgi?id=583083

Answer 1

？ミーリングは変わるかもしれませんが、Chrome（とIE/Edge、はい... IEとEdge）はソースマップを最もよく扱う傾向があります。この時点で主要なブラウザがすべてサポートしていますが、私はFirefoxの使用経験がありませんでした。

私たちは非常に大きなバンドルを持っており、ソースマップはdevtoolsの遅さを引き起こしていません。どのモードを使用していますか？ Webpackの場合、 "eval"を使用すると、ファイルはマッピングされますが、ソースはマッピングされないインラインソースマップが実行されます（生成されたコードが表示されますが、元のファイルと1対1の相関関係があります）。 ES6、Typescript、Coffeescriptの多くの構造物はよくマッピングされないので（例：ジェネレータや内包物）、これは通常、最も簡単なモードであり、最も高速です。評価版を使用すると、Chromeのdevtoolsで開発者の操作なしに「うまく動作します」（ファイルはwebpack：//疑似フォルダの下にあります）

これはブラウザかどうかわかりません特定のものまたは何か。私たちはユニットテストのためにMochaを使用しています。これはソースマップに特別なことはしていないように見えますし、スタックトレースをキャプチャしてテストランナーのWebpack上に適切にレンダリングします（webpack：//プリフィックスも元のファイル名適切な行番号）、そのライブラリの必要性はブラウザ固有であるか、時代遅れですか？私はそれが便利なので、同様のWebPACKをキックオフnpm run watchタスクを追加することが分かってきた

Answer 2

：

webpack -w --devtool eval

これは、ソースの結果は、少なくとも正しいモジュール名を持っていることをマップします。ソースマッピングされたソースはプリプロセスの一部（babel）なので多少混乱しますか？だから、あなたがソースに表示されますのようなもの：

import react from 'react';

しかし、実際の変数名は_react2または類似のようなものにマングドされます。私はマップされたソースが、醜い変数名を持つ処理されたバージョンであることや、マッピングされたソースに見られるような定義をスコープに持つことが大好きです。

私は上記のタスクのための私のpackage.jsonを持っている実際の行は次のとおりです。

"scripts": { 
    // other lines edited out 
    "watch": "node ./node_modules/webpack/bin/webpack.js -w --devtool eval" 
    }