1. ホーム
  2. javascript

[解決済み] ブラウザデバッグを可能にするためのwebpackの設定

2022-05-11 05:50:50

質問

私はwebpackの初心者で、既存のWebアプリケーションをwebpackを使うように変換しているところです。

私はJSをバンドルし、最小化するためにwebpackを使用しており、デプロイ時には素晴らしいですが、これは開発中にデバッグすることが非常に困難になっています。

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

バンドリングのオンとオフをすばやく切り替える方法はありますか? またはミニ化のオンとオフを切り替える方法はありますか?

スクリプトローダーの設定やその他の設定があるかどうか調べてみましたが、明らかではなさそうです。

私はまだ、すべてをモジュールのように動作するように変換し、require を使用する時間がありませんでした。そのため、私の読み込みには単純に require("script!./file.js") パターンを使用しています。

どのように解決するのですか?

あなたは ソースマップ を使うことで、自分のソースコードとバンドル/縮小されたソースコードの間のマッピングを保持することができます。

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

以下では、コマンドラインを使ってバンドルファイルを生成する工夫をした例です ( bundle.js ) を生成するコマンドラインと、生成されたソースマップファイル ( バンドル.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>

エントリ.js

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

hello.js

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

もしあなたが index.html をブラウザで開くと(私はChromeを使っていますが、他のブラウザでもサポートされていると思います)、タブの中に ソース の下にバンドルされたファイルがあることを確認します。 ファイル:// スキームで、ソースファイルは特別な webpack:// スキームを使用します。

そう、まるでオリジナルのソースコードを持っているかのように、デバッグを開始することができるのです! 1行にブレークポイントを置いて、ページをリフレッシュしてみてください。