React Boilerplate's HMR very slow when editing dependency library (node module)

Question

I'm using React Boilerplate which utilizes HMR (Hot Module Reload) in a dev environment.

However, I also have a custom component library which I load as a dependency. It has about 20 React components or so. The library is a UMD module which I load as a dependency through package.json in the boilerplate. It's also being built by Webpack and a build for it takes about 2 seconds.

When working locally on both projects though, I have the library linked in my boilerplate project (with 'npm link'), so I can see most recent changes.

Now, any time I make a change to anywhere in that dependency library, HMR kicks in for the boilerplate project, and that's great. But even the simplest change like a CSS color in that will take HMR around 20 seconds (!!!) to rebuild webpack in the boilerplate project.

That happens everytime the dependency is rebuilt, so 20 seconds when I make minor changes is very detrimental.

Can anyone please tell me how to mitigate that time? I feel like I am missing something. I'm running the default webpack config for boilerplate as it comes out of the box.

The dependency's webpack config is very similar to the boilerplate one, with a different output:

  output: {
    path: __dirname + '/dist',
    filename: 'index.js',
    library: 'my-component-library',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },

The babel and style loaders are pretty much the same.

Thank you all for any suggestions that you may have.

Answer 1

To answer my own question, I did this:

https://github.com/uber/react-map-gl/issues/165#issuecomment-275412920

internals/webpack/webpack.base.babel.js

@@ @@
    loaders: [{
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      loader: 'babel-loader',
-      exclude: /node_modules/,
+      include: [
+        path.resolve(process.cwd(), 'app'),
+        path.resolve(process.cwd(), 'node_modules/mapbox-gl/js'),
+      ],
      query: options.babelQuery,
@@ @@
  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
+    alias: {
+      'mapbox-gl$': path.join(__dirname, '../../node_modules/mapbox-gl/dist/mapbox-gl.js'),
+    },
},

package.json

    "env": {
      "production": {
-        "only": [
-          "app"
-        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },