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を使って学ぶ はじめてのフロントエンド開発"]