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:
Basics for Webpack Loaders
See the documentation on creating a Webpack Loader.
- What Are Loaders?
- Creating Loaders
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".
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.
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
/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
Yes, print statements help TONS.
%O will print an object!
console.log"someVar is %O", someVar);
To Use a Debugger
- Run this command:
npm install -g node-inspector
Put in a line with
debugger; in your project.
Run this command at the top level of your "my-great-loader-example" project:
Here's what it will look like:
Any other good tips? @floydophone?