[解決済み] ブラウザデバッグを可能にするためのwebpackの設定
質問
私は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行にブレークポイントを置いて、ページをリフレッシュしてみてください。
関連
-
vueディレクティブv-bindの使用と注意点
-
vue ディレクティブ v-html と v-text
-
Vueのフィルタの説明
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか?
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] モバイルブラウザの検出
-
[解決済み] webpackでjQueryプラグインの依存関係を管理する
-
[解決済み】HTMLのテキスト入力で数値入力しかできない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
jsを使った簡単な照明スイッチのコード
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
vueディレクティブv-bindの使用と注意点
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する