私は webpack を初めて使用しており、既存の Web アプリケーションを webpack を使用できるように変換しています。
私は webpack を使用して JS をバンドルおよび縮小していますが、これはデプロイ時には便利ですが、開発中にデバッグするのは非常に困難になります。
通常、JS の問題をデバッグするには、Chrome の組み込みデバッガーを使用します (または Firefox の Firebug)。ただし、webpack ではすべてが 1 つのファイルに詰め込まれるため、そのメカニズムを使用してデバッグするのは困難になります。
バンドル化をすばやくオン/オフにする方法はありますか? または、縮小化をオン/オフにする方法はありますか?
スクリプト ローダーの構成やその他の設定があるかどうかを確認しましたが、明らかなものは見つかりませんでした。
まだすべてをモジュールのように動作するように変換して requires を使用する時間がありません。そのため、読み込みには require("script!./file.js") パターンを使用するだけです。
ベストアンサー1
使用できますソースマップソースコードとバンドル/縮小されたコード間のマッピングを保持するためです。
Webpackは開発ツールバンドルされたファイルのソースマップを作成するだけで、開発者ツールでのデバッグを強化するオプション。このオプションは、コマンドラインから使用することも、config.js は、設定ファイル。
以下に、コマンドラインを使用してバンドルファイルを生成する不自然な例を示します（バンドルjs) と生成されたソースマップファイル (バンドル.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]
インデックス.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();
こんにちは
module.exports = function () {
return 'Hello world!';
};
開くとインデックス.htmlブラウザ（私はChromeを使用していますが、他のブラウザでもサポートされていると思います）でタブが表示されます出典バンドルされたファイルはファイル：//スキームと特別なソースファイルウェブパック://スキーム。
はい、元のソース コードがあるかのようにデバッグを開始できます。 1 行にブレークポイントを設定してページを更新してみてください。
