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

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モジュールのデバッグが簡単にできる

image

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

  • 原 一浩,taisa,小松 大輔,永井 孝,池内 孝啓,新井 正貴,橋本 安司,日野 洋一郎
  • 技術評論社
  • 価格￥454(2022/05/05 01:52時点)
  • 発売日2018/05/09
  • 商品ランキング419,768位
FacebookTwitterGitHub