Webpack Dependency Suite

A set of loaders, plugins and utilities designed to help with adding custom dependencies to your project.

Usage

TODO.

Parts of the Suite

require.include loaders

These are a bit like baggage-loader but more configurable and advanced.

• comment-include-loader:

    /* @import */ 'module'
    /* @import @lazy @ */ 'module'
    /* @import('thing\/*\/also\/works') @lazy @ */ 'module' // <<- globs will not work in comments cause of /**/ unless you escape slashes

• conventional-include-loader (include related files according to passed in function(fs)) [eg. like-named require loader for .html files]
• template require loader <require from="..." lazy bundle="abc"> (and others - configurable?) ${} globbing by:

  - splitting path by '/'
  - find first component where * is
  - resolve previous one || contextDir
  - get all files recursively
  - split their paths '/'
  - add all that match the regex 

• explicit loader: adds all dependencies listed in a JSON file to a given, individual file (entry?) expose a method to check if a path should override/add loaders by query configuration
• note: globbed paths MUST include extensions

Resolve Plugins

• resolve plugin for trying nested directories auto-resolve stuff (e.g. Aurelia's /dist/es2015)
• resolve plugin to use root module from node_modules if version range satisfied

Normal Use Plugins

• mapped relative moduleId plugin sets ModuleID:

  - use relative to any of config.modules (node_modules, app)
  - no JS extensions
  - rewrite paths for aurelia (strip /dist/node_modules/)
  - strip nested node_modules/.../node_modules
  - just do: package_name/request
  - for /index do package_name
  - name loader-based modules with a prefix: LOADER!NAME
  - aurelia loader checks cache for normal module name, then for async!NAME

  sets module.id relative to configured directory optionally keeps extension (.js .ts)

Development / Debugging

There are two scripts that are setup already:

• npm run dev

  • will run the same configuration instead with webpack-dev-server for live reload

• npm run build

  • will simply execute a webpack build in the repo

• npm run debug

  • will run the same build with node debugger.
  • paste provided link in Chrome (or Canary), and you will have the super incredible ChromeDevTools to step through your code for learning, exploration, and debugging.

Helpful resources:

• How to write a webpack loader
• How to write a plugin
• Webpack Plugin API
• webpack-sources
• enhanced-resolve

Recognition

The repository is based on the fantastic webpack-developer-kit by TheLarkInn, inspired by blacksonics.