Debugging NodeJs and Webpack Loaders

JavaScript
1

Background

I wanted to make it super easy for Webpack to load some version of Bootstrap,
loaded from NPM, and using Sass to customize it.

You can see the results here:

  1. https://github.com/justin808/bootstrap-sass-loader
  2. https://github.com/justin808/bootstrap-sass-loader-example

Basics for Webpack Loaders

See the documentation on creating a Webpack Loader.

  1. What Are Loaders?
  2. Creating Loaders

Npm Link

It creates sym links so one project, the consumer of the loader, can use the
code inside of another directory. There’s really 2 parts to this:

Suppose you are developing a loader called “my-great-loader” and you have an
example consumer of this loader in a project called “my-great-loader-example”.

  1. Running npm link at the top level of your loader directory creates a sym
    link from your global node_modules to the loader you are developing.
  2. Running npm link my-great-loader in the top level of
    “my-great-loader-example” will create a sym link to the global node module.
    Since step one made that global module point to your development directory
    for “my-great-loader”, you’re all set.
# First create the link the globals to my fork
> cd ~/forks/my-great-loader
> npm link
   /Users/justin/.nvm/v0.10.33/lib/node_modules/my-great-loader -> /Users/justin/forks/my-great-loader
> cd ~/my_project
# Change reference from folder in node_modules to global one, which points to the fork
> npm link my-great-loader
    unbuild my-great-loader@0.13.0
    /Users/justin/my_project/node_modules/my-great-loader -> /Users/justin/.nvm/v0.10.33/lib/node_modules/my-great-loader -> /Users/justin/forks/my-great-loader
> ls -l node_modules
lrwxr-xr-x   1 justin  staff   58 Nov 23 07:20 my-great-loader -> ../../../.nvm/v0.10.33/lib/node_modules/my-great-loader

Confirm that you have this setup correctly with a console.log("HELLO"); at the
beginning of your loader and test running webpack.

Print Statements

Yes, print statements help TONS. %O will print an object!

console.log"someVar is %O", someVar);

To Use a Debugger

Updated

Old Instructions

  1. Run this command:

    npm install -g node-inspector

  2. Put in a line with debugger; in your project.

  3. Run this command at the top level of your “my-great-loader-example” project:

    node-debug webpack

Here’s what it will look like:

Any other good tips? @floydophone?