Adding Webpack Dev Server

[hutchgrant]

Resolves #14

Adds

• webpack dev server
• nodemon
• concurrently

Changes

• if node_env is development, then the final steps of our the cli/index.js will not be run (serializing components and publishing to public folder).

Problems:

• this will monitor js/css/html/md changes, however, I'm not positive if it will monitor the user's source directory.
• it will display a brief compilation error on every change update, due to the gap between rebuilding the scratch directory and the webpack-dev-server recompiling and serving the files.

[thescientist13]

Thanks for this!

Let's see what comes out of our discussion of #28 , and see if that influences our direction on this feature.

[hutchgrant]

When tested with the rfc-user-workspace branch merged, the scaffold script fixed to prevent creating directories that already exist, as well as not cleaning on every build, the nodemon + webpack-dev-server script runs smoothly!

[thescientist13]

Nice, this looks like a promising start!

Main concern with this approach as it stands currently is that it is happening entirely within npm / Yarn scripts, when it should really be happening within index.js.

From a user's perspective, as they will be running greenwood from the CLI, for a feature like this, I would expect the API to be something like:

$ greenwood --[build|develop]

From within that, I would expect Greenwood to launch with the appropriate processes, eg.

• build: webpack
• develop: webpack-dev-server and whatever else we need to get it to work

As far as the project goes, we can still use an npm script, but it would be similar to the build task, e.g.

$ node ./packages/cli/index.js --develop

From there, I would be interested to see if we can somehow define an additional entry point or watch capabilities from webpack itself? Maybe some sort of directory watching or webpack.config.develop.js specific entry point that can point to a user's src/ directory? 🤔

Some things I found that might be of help here

• https://webpack.js.org/configuration/watch/
• https://github.com/pigcan/extra-watch-webpack-plugin
• https://github.com/sap9433/filewatcher-webpack-plugin

[thescientist13]

Closing this since #36 is pretty much good to go at this point. 👍