デバッグする方法 [Webpack]

デバッグする方法

参考：

Debugging | Webpack [Official]

Stats Data | Webpack [Official]

使い方

参考：

This will make you more efficient at debugging Webpack unspecified build errors | Angular In Depth

Debugging NodeJs and Webpack Loaders – JavaScript – ShakaCode Forum

analyse

$ webpack --profile --json > stats.json

参考：

webpack/analyse: analyse web app for webpack stats – GitHub

analyse Demo site

Webpack Chart

参考：

Webpack Chart

alexkuz/webpack-chart: Webpack Chart – GitHub

Webpack Visualizer

参考：

Webpack Visualizer

chrisbateman/webpack-visualizer: Visualize your Webpack bundle – GitHub

Webpack Bundle Analyzer

参考：

webpack-contrib/webpack-bundle-analyzer: Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap – GitHub

babel-loader

参考：

How to output debug information? · Issue #53 · babel/babel-loader – GitHub

inspect-loader

参考：

peerigon/inspect-loader: Webpack loader designed for loader testing and debugging. Calls a function with the received input – GitHub

watch でコンパイル時に時刻を表示する

参考：

webpack --watch でビルドが始まった時間をログに出す – Qiita

ログ

参考：

Is it possible to log the progress during a webpack build? – Stack Overflow

webpack-logging-plugin

参考：

zinserjan/webpack-logging-plugin – GitHub

webpack-logging-plugin – npm

DevTools

--inspectオプションを付けて起動する

$ node --inspect ./node_modules/webpack/bin/webpack.js

Webpacker (Ruby on Rails) で Node のオプションを指定して webpack-dev-server を起動する

$ NODE_OPTIONS="--inspect" bin/webpack-dev-server

Chrome を開いて chrome://inspect ページにアクセスして、Open dedicated DevTools for Node のリンクをクリックする

参考：

node-inspectでnode.jsのデバッグ環境を構築してみた – Qiita

node-nightlyを使ってwebpackをデバッグする – たいさブログ

Debugging Node.js with Chrome DevTools – Paul Irish – Medium

Learn and Debug webpack with Chrome Dev Tools! | webpack – Medium

DevTools – Debugging | Webpack [Official]

Debugging – Getting Started | Node.js [Official]

webpack-log

参考：

webpack-contrib/webpack-log: A common logging module for the webpack ecosystem – GitHub

loglevel

参考：

pimterry/loglevel: Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods – GitHub

loglevel – npm

Webpackで環境ごとにLoggerのLogLevelを設定 – Qiita

Correct usage with webpack, how? · Issue #99 · pimterry/loglevel – GitHub

LogLevel conflict. Always setting level to INFO · Issue #1064 · webpack/webpack-dev-server – GitHub