Fix issue w/ production CSS being generated in wrong order (Webpack)

[jjhampton]

Issue Resolved

Fixes #945 - caused by CSS being generated in out of order in production.

Description of changes

Updates the NPM dependency extract-text-webpack-plugin to v3.0.0, per the recommendation in the issue from the dependency repo here. Without the update, CSS files on production were being generated in the wrong order - bug was not occurring on dev environment served from webpack-dev-server.

To Test Locally

Code reviewers will want to test locally w/ the Webpack production build. I ran into some errors following the Quickstart Guide production steps, so I had to go thru the following steps:

1. in server.js, comment out these lines:

// app.use((req, res, next) => {
//   if (req.headers['x-forwarded-proto'] !== 'https') {
//     return res.redirect(`https://${req.headers.host}${req.url}`);
//   }
//   return next();
// });

2. Install new dependency version and build production:
   yarn
yarn run build

3. Start docker container:
   docker-compose up -d --build

4. Visit http://localhost:80 to test the production build on the docker container server

[apex-omontgomery]

Jumped the gun for a moment.
https://gist.github.com/wimo7083/0cbca5cae162fb1241d82b637952d3ca

Still showing 300px. Attached is my deployment gist and image of reproduction.

[jjhampton]

@wimo7083 - Strange, on line 70 of your Gist, in your Docker build, it says it's still using the old version of the dependency: extract-text-webpack-plugin@2.1.0 instead of v3.0 (the new one added to the package.json in the PR)

[jjhampton]

@wimo7083 Here's a Gist of my local production build - https://gist.github.com/jjhampton/50879d654a763b02bfaeee0cb9a0723e

Mine didn't output the same output as yours for Step 8 / yarn install step of the Docker build (where yours had the warning about the old version extract-text-webpack-plugin@2.1.0) - my build just used some cached dependencies, apparently. Yesterday, I did have to initially repeat the production build steps several times just to get it working, though - maybe that's why somehow Docker or Yarn cached something. I'm not familiar enough with either to know how/why:

 Step 8/11 : RUN yarn install --no-progress
 ---> Using cache
 ---> 8b67a5339613

The CSS (and the signup form) do look correct on the docker container serving the production build on my machine. Can you try and repeat the build, perhaps? Or we could have someone else try and replicate - @kylemh ?