node-nightlyを使ってwebpackをデバッグする

webpackに限らずだけどnode-nightlyを使うと簡単にデバッグすることができる

Debugging

When contributing to the core repo, writing a loader/plugin, or even just working on complex project, debugging tools can be central to your workflow. Whether the problem is slow performance on a large project or an unhelpful traceback, the following utilities can make figuring it out less painful.

node-nightlyをインストールする

インストール後一度初期化を行う

npm i -g node-nightly
// 初期化
node-nightly

webpackの実行環境をつくる

デバッグする為にwebpackの実行環境をつくる npm initしてwebpackをディレクトリ配下にインストールする

npm init
npm i -D webpack
//バージョンは4.12.1
npx webpack --version
4.12.1

webpack-cliをインストールする。ここではグローバルインストールとしている。

npm i -g webpack-cli
//バージョンは3.0.8
webpack-cli --version
3.0.8

webpack.[prod].jsをコマンドラインから作成する

webpack-cli init

以下のように聞かれるので好みの設定をする（今回はデフォルトを利用）

ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/master/INIT.md
ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info.
? Will your application have multiple bundles? No
? Which module will be the first to enter the application? [default: ./src/index]
? Which folder will your generated bundles be in? [default: dist]:
true
? Will you be using ES2015? Yes
? Will you use one of the below CSS solutions? PostCSS
? If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)
npm WARN nightly@1.0.0 No description
npm WARN nightly@1.0.0 No repository field.

webpack-cliで設定したディレクトリとファイルを作成する

mkdir dist
mkdir src

ここではindex.jsからhello.jsを呼び出す形にした index.js

vi src/index.js

import hello from './hello.js'

hello.js

vi src/hello.js

export default function () {
console.log('Hello webpack')
}

ちゃんとビルドできるかチェック

npx webpack --mode development

正常にビルドできた

Hash: b4135b9c0e10130dfeb5
Version: webpack 4.12.1
Time: 309ms
Built at: 2018-06-26 19:55:01
Asset Size Chunks Chunk Names
main.js 980 bytes 0 [emitted] main
[0] ./src/index.js + 1 modules 102 bytes {0} [built]
| ./src/index.js 38 bytes [built]
| ./src/hello.js 64 bytes [built]

node-nightlyを使ってデバッグする

node-nightlyは--inspect-brkオプションを使うと1行目で止まってくれる webpackのデバッグを実行

node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js --mode development

コマンドを実行したらchromeで以下のURLにアクセスする

chrome://inspect/

すると下記のようにinspectリンクが出てくるのでクリックする

クリックするとデバッガが立ち上がり、1行目で止まるのでステップ実行していくことができる。オプションを変えれば1行目で止まらないことも可能。

node-nightlyを使えばwebpackに限らずnpmモジュールのデバッグが簡単にできる [amazonjs asin="4774197068" locale="JP" title="React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発"]