Webpack config refactor; CSS now generated with HTML

[scottnonnenberg]

I realized that the noProductionJavascript option wasn't quite right because it still generates a weird unminified public/bundle.js, and you get no generated styles.css. This pull request changes that.

First, it makes the three stages in util/webpack.config.js a little easier to understand, renaming them to:

1. develop
2. build-static
3. build-spa

Second, it moves styles.css generation to Stage 2, the 'build-static' stage.

Third, it renames the temp webpack-generated file required by static-site-generator-webpack-plugin (previously public/bundle.js, so it was overwritten by the final webpack stage) to public/render-page.js and deletes it when Stage 2 is complete.

[KyleAMathews]

Hi! nice refactor 👍. A few naming suggestions to run by you. What I've been thinking for renaming the stages to is build-css, build-html, and build-javascript. I want to keep css + html building separate for #145 which will add a nice perf boost. Also build-spa is misleading because the JS is not just for eliminating reloads but also for any JS enhancements you add to your react.js components...

An idea to explore in a future refactor (or current if you feel like trying it) would be to see if build times are sped up by spawning a separate process to build the Javascript and CSS/HTML (CSS needs to be built before HTML so it can be inlined).

[scottnonnenberg]

Four stages. No use of the term 'SPA.' :0)

I'm not fully happy with the change, however, because webpack doesn't seem to be able to just scan for CSS then produce one resultant CSS file. It will always generate a final bundle.js. So, like the 'build-html' step we have to delete a file afterwards.

That extra bundle.js generation makes the build process quite a bit slower. Here's a full run on my blog with the four stages:

Generating static HTML/CSS
Compiling production bundle.js
Copying assets
Done

real    0m26.855s
user    0m27.204s
sys 0m1.272s

And here's a run on the previous commit, still three stages:

Generating static HTML/CSS
Compiling production bundle.js
Copying assets
Done

real    0m18.992s
user    0m19.291s
sys 0m0.934s

[KyleAMathews]

Hrrm... that is quite a bit slower. I'm really curious now if spawning separate processes would speed things up now. Parallelizing things seems like the only way to eke out more speed.

[KyleAMathews]

I'll try to play with this more soon. Also this is a breaking change so probably we should wait for a few more breaking changes before merging.

[scottnonnenberg]

Oh, interesting - I didn't consider it breaking. What's the interface you're considering for the break?

[KyleAMathews]

Anyone modifying the default Webpack config and looking at the stage names.

[scottnonnenberg]

Ah yes, there is that way to hook in. Thanks for the reminder. :0)

[KyleAMathews]

I'm going to merge this for now. The ~33% speed decrease we can fix later by just building the bundle.js in another process (https://github.com/sindresorhus/execa looks nice).

[KyleAMathews]

Which will actually probably speed up build times.