Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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 included 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 tasks transpiles the code OK.

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

like image 333
larsw Avatar asked Aug 03 '16 08:08

larsw


People also ask

How do you use Webpack watch?

When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it'll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn't changed.

Does Webpack use npm?

It is mostly used to manage JavaScript codebases, most often for usage in the browser, and requires Node. js to use. To answer question : Webpack (and all its associated plugins) is on npm (https://www.npmjs.com/package/webpack).

Is Webpack a dev dependency?

This approach considers that since your production app (aka the bundle you built with Webpack) can just run by itself, it means you have no production dependencies. Thus, all dependencies are devDependencies .

What is the purpose of npm and Webpack?

npm is the command-line interface to the npm ecosystem. It is battle-tested, surprisingly flexible, and used by hundreds of thousands of JavaScript developers every day. On the other hand, Webpack is detailed as "A bundler for javascript and friends". A bundler for javascript and friends.


Video Answer


1 Answers

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.

like image 198
anytimecoder Avatar answered Nov 13 '22 09:11

anytimecoder