webpack
に限らずだけどnode-nightly
を使うと簡単にデバッグすることができる
DebuggingWhen 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モジュールのデバッグが簡単にできる
React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発
- 原 一浩,taisa,小松 大輔,永井 孝,池内 孝啓,新井 正貴,橋本 安司,日野 洋一郎
- 技術評論社
- 価格¥454(2022/05/05 01:52時点)
- 発売日2018/05/09
- 商品ランキング419,768位