ブラウザのデバッグを許可するようにWebpackを構成する

130

私はwebpackを初めて使用し、それを使用するように既存のWebアプリケーションを変換しています。

私はwebpackを使用してJSのバンドルと縮小を行っていますが、これは展開時に最適ですが、これにより開発中のデバッグが非常に難しくなります。

通常、私はJSの問題をデバッグするためにクロムの組み込みデバッガーを使用します。（またはFirefoxのFirebug）。ただし、webpackを使用すると、すべてが1つのファイルに詰め込まれ、そのメカニズムを使用してデバッグすることが困難になります。

バンデリングをすばやくオンまたはオフにする方法はありますか？または縮小をオンまたはオフにしますか？

スクリプトローダーの構成やその他の設定があるかどうかを確認しましたが、明らかではありません。

すべてをモジュールのように動作するように変換して使用するための時間はまだありません。したがって、ロードにはrequire（ "script！./ file.js"）パターンを使用するだけです。

javascript webpack

— ジム
ソース

3

この問題の解決策を見つけましたか？また、JSコンソールを使用して、使用可能な変数を確認することも好みます。私の主な問題は、そのWebPACKの原皮モジュール内のこれらの変数のすべてで、彼らはアクセスできなくなるので

— user1496984

2

本当に解決策が見つからなかったため、残念ながらwebpackの使用を中止しました。

— ジム

今何を使っていますか？執筆時点では、まだwebpackが最も人気のあるビルドツールのようです。

— リチャード

100

使用できますソースマップをして、ソースコードとバンドル/縮小されたものとの間のマッピングを維持。

Webpackはdevtoolを提供しますバンドルされたファイルのソースマップを作成するだけの開発者ツールでのデバッグを強化するオプションがされています。このオプションは、コマンドラインから使用するか、webpack.config.js構成ファイルで使用できます。

以下は、コマンドラインを使用して、バンドルされたファイル（bundle.js）を生成されたソースマップファイル（bundle.js.map）とともに生成する、不自然な例です。

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

ブラウザでindex.htmlを開くと（私はChromeを使用していますが、他のブラウザでもサポートされていると思います）、[ ソース ]タブで、バンドルされたファイルがfile：//スキームの下にあり、ソースファイルが特別なwebpack：//スキーム。

はい、元のソースコードがあるかのようにデバッグを開始できます。ブレークポイントを1行に入れて、ページを更新してください。

— dreyescat
ソース

2

bundle.mapはjsファイルを指しますが、実際のjsファイルにもtsxまたはtsと言うためのマップがある場合はどうなりますか？

— Andrej Kovacik 2017

4

私は、生産と開発モードを使用してプロジェクトをセットアップへのより良いと思う https://webpack.js.org/guides/production/ そのまた、デバッグにあなたのコードをマッピングする方法を含めます

devtool: 'inline-source-map'

— m-farhan
ソース

3

すでに指摘したように、ソースマップは非常に便利です。
ただし、使用するソースマップを選択するのが面倒な場合もあります。

Webpackソースマップの問題に関するこのコメントは、要件に基づいて使用するソースマップを選択するのに役立ちます。

— アビナフ・シンギ
ソース

1

こちらをご覧ください

これは、JavaScriptを縮小する美容ツールです。下部には、ブラウザ用のさまざまなプラグインと拡張機能のリストがあります。チェックしてください。

FireFox Deminifierに興味があるかもしれません。FireFoxDeminifierは、サーバーから取得したJavaScriptを縮小してスタイル設定することになっています。

ここに画像の説明を入力してください

— バナナ
ソース

10

縮小は、コメントが削除され、行番号が一致しなくなり、変数名が同じではないため、縮小を無効にすることと同じではありません。それは何もないよりはましだと言われている。

— ジム

1

Chromeには、デバッガーのフォーマットオプションもあります。通常のソースファイルに含まれるすべての情報が含まれているわけではありませんが、すばらしい出発点であり、ブレークポイントを設定することもできます。クリックするボタンは最初のスクリーンショットの左下にあり、{}のように見えます。

フォーマットする前に：

フォーマット後。

— ジョリー1234
ソース