Need help with webpack-developer-kit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

TheLarkInn
209 Stars 39 Forks 50 Commits 7 Opened issues

Description

webpack dev kit for writing custom plugins and loaders on the fly. Education/Exploration tool as well.

Services available

!
?

Need anything else?

Contributors list

No Data

webpack Developer Kit

Super lightweight boilerplate tailored to help developers understand how to create custom loaders and plugins.

Requirements

  • Node 6.3 or higher (for native
    node --inspect
    )

Usage

Fork and clone this repo and then run

npm install

NPM Scripts

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.

Whats in the config?

You will notice two things that are setup already for you that should assist in learning to rapidly write custom plugins and loaders:

  • An
    inline
    webpack plugin already defined. You can use an anon. function inside of the plugins array which will then allow you to
    plugin
    to the
    compiler
    instance (which is
    this
    ):
  plugins: [
    // This function is the `apply` function if you were to create an external plugin
    // Having it inline provides some nice conviences for debugging and development
    function apply() {
      /** @type {Compiler} */
      var compiler = this;
      compiler.hooks.compilation.tap('MyCustomInlinePlugin', compilationTapFunction);
    },
    /* ... */
  ],

You'll now notice that I've also added JSDOC annotations through the code. This allows you to leverage powerful type inference capabilities via VS Code, and TypeScript Language Server, to show what types, properties, and methods the arguments, and parameters contain. This is incredibly great combined with

CMD/CTRL + click + hover
. This should make understanding and writing plugins a bit easier in this kit.
  • A
    custom-loader
    in the project root, and configuration for resolving it so you can use. Loaders by default automatically resolve from
    node_modules
    and therefore the
    resolveLoader
    property on the config allows you to have an
    alias
    'd resolve for that loader so you can work on it right in your project. (Much easier than creating a npm module, npm link and npm link module-name):
module.exports = loader;

function loader(source) { console.log(source); debugger; return source; }

Helpful resources:

Questions, issues, comments?

Sean, I have a great suggestion for this repo, or notice a bug

Submit an issue or a pull request for the feature. If I don't respond in a few days, tag me @TheLarkInn or tweet me at the same name (I'm terrible with email notifications).

Sean, I want to know how to do this, or that with a loader or plugin

Please submit an issue to the webpack core repository. Most times, if you are trying to write a custom loader or plugin, one of the contributors or @Sokra, or myself will be able to provide you with guidance. Plus, if it is an undocumented, or poorly documented feature, then we will tag it as documentation and move a copy of it over to our new docs page (Or even better if you find out you can submit a PR to our doc page.)

Recognition

I came up with this idea after forking blacksonics babel-treeshaking test repo. As I was debugging it, I found that "Hey, this would be pretty useful for people who want to write their own stuff". Thus you will see in initial git history, his mark on files like the

readme
.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.