How to instruct webpack to watch changes in an NPM linked dependency (package)

Question

I'm trying to figure out how to get webpack to watch an NPM linked dependency. I've tried to add an explicit entry pointing into the package, and I've tried to both explicitly includ it and also not excluding /node_modules/ (which is quite common).

The scenario I want to achieve is as follows: I want to separate out parts of my react-based applications into component libraries (NPM packages).

Both the main package and the dependencies are written in ES6, so I've created a small gulp script that watches for changes in the dependent project, and transpiles its source (src/) to lib.

I've used npm link to wire in the dependent package so that I don't need to pack/publish/reinstall it every time I make a change.

When I make changes to the dependent package, the gulp task transpiles the code OK.

It is with the last part that I am struggling; getting webpack watch to trigger a re-bundling when the dependency is refreshed by the aforementioned gulp task.

I'm having the same situation, do you have any way to solve it? I have a project like: a -> b -> c b depends on a, c depends on b. I want to be able to change a or b, and compile c once b is compiled. — singuerinc
– singuerinc, Commented May 11, 2017 at 7:13
Did we ever come up with a specific approach for resolving this? In the age of monorepos, it seems like an obvious issue. It'd be great if we had an example repo! — HipsterZipster
– HipsterZipster, Commented Sep 19, 2017 at 23:12

anytimecoder · Accepted Answer · 2017-01-25 07:42:37Z

5

Make sure you transpiler script doesn't delete your old /lib dir, but overwrites files instead.

I had a similar problem with Webpack dev server not seeing changes because I was removing the /lib dir before every transpile.

answered Jan 25, 2017 at 7:42

anytimecoder

7,7442 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergio Rosas Over a year ago

This works, just tried myself. In my case I'm working with Typescript Once I removed the "rimraf" removing the "lib" (or any name you have), it worked. I have webpack watching the final project, while TS watches the code from the linked dependency

Collectives™ on Stack Overflow

How to instruct webpack to watch changes in an NPM linked dependency (package)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related