Webpack/Babel vs. npm link

Let's say we're writing a node module that is intended to be used in a Webpack/Babel project, but it explodes when connecting the two with `npm link`. What now?

The scenario:

  • We’re writing a module in es2015, and transpiling it
  • We’re consuming the module in a project that is also transpiled with Webpack and Babel
  • To make working on these projects a little less painful, we’re using npm link to see changes in the module reflected in the consuming project, without having to do an npm publish

Webpack doesn’t ignore linked modules in node_modules when a loader is configured to ignore node_modules. I suspect this has something to do with symlinks, but haven’t really investigated it. A quick fix for the issue is to simply configure the Webpack loader to also ignore the module(s).

Easy enough in my case, as I always write modules to be transpiled into a dist directoy. I simply ignore dist in the Webpack loader.

  module.exports = {

      // ...blah blah blah

      module: {
          loaders: [
              test: /\.jsx?$/,
              exclude: /(node_modules|dist)/, // ignoring /dist
              loaders: ['babel'], // etc etc