Webpack プロジェクトでローダー プラグインをデバッグする方法

最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正規表現が機能しないことに気付きました。プラグインをデバッグした後、検索キー値が正規表現の記述をサポートしていないことがわかりました。その後、string-replace-loaderプラグインに切り替えました。このローダーの検索キー値は正規表現の記述をサポートしており、問題は解決しました。ローダーのデバッグ方法は次のとおりです。

まずノード環境を準備する必要があります

ステップ1: node-nightlyをグローバルにダウンロードしてインストールする

npm インストール -g --save-dev ノードナイトリー

ステップ2: デバッグコマンドを追加する

 "node-nightly": "node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js",

ステップ3: コマンドラインでnpm run node-nightly

ステップ4: Google Chromeを開き、URLにchrome://inspect/#devicesと入力します。

検査をクリックしてデバッグページに入ります

ステップ 5: vscode の node_module でローダーの index.js ファイルを見つけ、module.exports 関数にデバッガーを追加します。

この時点で、通常の js のデバッグと同じように、対応するローダー スクリプトをデバッグできます。

これで、webpack プロジェクトでローダー プラグインをデバッグする方法に関するこの記事は終了です。webpack デバッグ ローダー プラグインの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。