Update to Webpack v2 and Yarn (#336)

[kaizencodes]

Eslint still fails due to the webpack resolver, couldn't solve it atm. I'll look into it later.

• Replaced npm calls to yarn
• updated package.json to webpack and all dependencies
• updated config files to use webpack2 syntax
• updated docs
• updated travis config for yarn

---

This change is 

[justin808]

@kaizencodes Great start. Looking forward to this one!

[kaizencodes]

Had to upgrade eslint-import-resolver-webpack. All good now. I believe this also solves #364.
@justin808 Let me know if you need anything else for this one.

[reconstructions]

@justin808, I submitted PR #336 to resolve #364 before I saw this, feel free to ignore it if this fixes the issue.

[justin808]

@kaizencodes @reconstructions I'm going to merge #336 first. Then let's apply this.

---

Reviewed 21 of 21 files at r1.
Review status: all files reviewed at latest revision, all discussions resolved.

---

Comments from Reviewable

[justin808]

Odd files added.

---

Reviewed 5 of 5 files at r2.
Review status: all files reviewed at latest revision, 2 unresolved discussions.

---

client/package_BACKUP_3418.json, line 2 at r2 (raw file):

{
  "name": "react-webpack-rails-tutorial",

delete this file?

---

client/package_BASE_3418.json, line 2 at r2 (raw file):

{
  "name": "react-webpack-rails-tutorial",

what's this file?

---

Comments from Reviewable

[kaizencodes]

It must have been generated when I resolved the conflict, I didn't think it would do something like this.
Removed them.

[justin808]

---

Reviewed 2 of 4 files at r3.
Review status: all files reviewed at latest revision, 2 unresolved discussions.

---

Comments from Reviewable

[justin808]

Great job @kaizencodes! Thanks!

[szyablitsky]

@justin808 @kaizencodes this PR broke hot-reloading with css-loader. Imported styles are not there anymore with Procfile.dev, but they are present with Procfile.static or production build.

Another issue is an error

[sass-resources-loader]:  `options.context` is missing. Using current working directory as a root instead: /home/user/projects/react-webpack-rails-tutorial/client

which is printed out in log for every imported css module.

Any suggestions how to fix these issues?

[szyablitsky]

Last one can be fixed by adding context: __dirname, inside of

new webpack.LoaderOptionsPlugin({
  options: {
   // Place here all postCSS plugins here, so postcss-loader will apply them
   postcss: [autoprefixer],
   // Place here all SASS files with variables, mixins etc.
   // And sass-resources-loader will load them in every CSS Module (SASS file) for you
   // (so don't need to @import them explicitly)
   // https://github.com/shakacode/sass-resources-loader
   sassResources: ['./app/assets/styles/app-variables.sass'],
   context: __dirname,
},

[justin808]

@szyablitsky Please feel free to submit a PR. 😄

[justin808]

@Judahmeek is working on hot reloading. He can comment here.

[szyablitsky]

I'm not sure that using webpack.LoaderOptionsPlugin for context is the right way to go. Because webpack documentaton says:

The LoaderOptionsPlugin is unlike other plugins. It exists to help people move from webpack 1 to webpack 2.
Until a loader has been updated to depend upon options being passed directly to them, the LoaderOptionsPlugin exists to bridge the gap.
In the future this plugin may be removed

There must be other way to provide context option. But I'm not sure where it should be. BTW @justin808 what is the reason of its existence at first place? Can we just use process.cwd() everywhere?

[justin808]

@kaizencodes @szyablitsky Check out https://github.com/shakacode/react_on_rails/tree/master/spec/dummy

[justin808]

@szyablitsky Yes, we should not be using the LoaderOptionsPlugin if we can avoid it. Are we using it in the /spec/dummy of the ReactOnRails repo?

[szyablitsky]

'style-loader' is absent
hot reloading is not working because of it

[justin808]

@szyablitsky or @kaizencodes can you please submit a PR?

[szyablitsky]

@justin808 #373