javascript - ブラウザーのデバッグを許可するように webpack を構成する

Question

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

私は webpack を使用して JS をバンドルおよび縮小していますが、これは展開時に優れていますが、これにより開発中のデバッグが非常に困難になります。

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

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

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

すべてをモジュールのように機能させ、require を使用するように変換する時間はまだありません。したがって、ロードには単に require("script!./file.js") パターンを使用します。

score 108 · Accepted Answer

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

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

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

$ 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 行に配置して、ページを更新してみてください。

score 1 · Accepted Answer

こちらをご覧ください

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

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

_{(出典: mozilla.net )}

javascript - ブラウザーのデバッグを許可するように webpack を構成する

5 に答える 5

index.html

entry.js

hello.js

Related

Reference