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.
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 linkat 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-loaderin 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 firstname.lastname@example.org /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?