Webpack setup

[akrigline]

So it turns out there's a metric tonne of peer dependencies for these loader setups. The SCSS setup I have found requires a minimum of 3 loaders, pulling in autoprefixer puts that up to 4, and then for production you need another plugin, and then for the resources-loader that puts the final tally at 6.

This setup does not handle SVGs at all. Webpack will error out if you use a .svg somewhere as it has no loaders associated with that file type. There's a slim chance it'll default to the file loader but I am doubtful.

The Readme has a step by step walkthrough of what each loader does and when to the best of my knowledge, as well as links to each loader's readme (some of which leave plenty to be desired).

This completes #11.

How to Test

Pull this branch and run npm run start. It should start a webpack-dev-server that will update when you make changes to either the HomeRoute, ProfileComponent, or any of the Scss files associated with them.

run npm run build, it should create a bundle in the /dist directory that opens by simply opening the html file within.

[dfagan2]

@akrigline - i pulled this down, ran npm install and then npm run start and get:

Error: Cannot find module 'array-includes'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/dfagan/Desktop/Projects/Frontend-Dev/react-gantry/node_modules/webpack-dev-server/lib/polyfills.js:6:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-gantry@1.0.0 start: `webpack-dev-server --mode development --open --config config/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-gantry@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dfagan/.npm/_logs/2018-03-14T21_19_15_151Z-debug.log

[akrigline]

@dfagan2 Try it after rm -rf node_modules as well. I'll take a look in a minute.

[dfagan2]

I tried first deleting package-lock.json and rerunning npm install then npm run start and got a similar error but for a different package: 'path-dirname'

deleting both node_modules ad package-lock.json and starting from scratch fixed it. but we should try to understand what that tripping point was so others don't experience it

[akrigline]

I think you encountered problems because you had previous versions of a couple things I updated installed. I'm not sure why NPM didn't update the installed versions though.

[akrigline]

Neither of the things you listed are in the package.json, which tells me they're sub-dependencies. I'm not sure how npm handles these things.