enable webpack hot-reloading

[vanderhoop]

as a developer who doesn't want to have to recreate a UI state every time Phoenix LiveReload does a complete browser refresh, I want to enable webpack hot module reloading so that I don't waste a bunch of precious time manually recreating UI state throughout the life of the project.

Pre-reqs:

• ~~upgrade to webpack 2 (story upgrade to webpack 2.2 #11) before implementing so as to not add additional migration work!~
  • Update: per a team discussion on 2/14/2017, WebPack 2 isn't a strict pre-requisite for this, as the v2 documentation isn't quite where it needs to be and therefore the current cost might outweigh the current benefit
    • Another update: we totally upgraded to WebPack 2. Carrying on!

Acceptance Criteria:

• changes to .js. files don't trigger full-page refreshes in the browser
  • the Phoenix framework ships with a feature called PhoenixLiveReload, which watches for file changes and triggers full page refreshes. We no longer want this functionality in a new, hot-reloading world
    • to disable js file changes from triggering a full page reload, simply remove js files from being pattern matched in the PhoenixLiveReload config.
• developers can change a react component's implementation and see the change update on the screen without having to reload

[vanderhoop]

Still to do:

• current implementation b0rks livereload css

[vanderhoop]

Still to do:

• Consolidate the webpack.production.config (introduced) back into standard webpack config:
  • we should be protected due to the no-ops in react-hot-reload/patch
• extract configureStore (reducer hot reloading) out into a helper file
• deploy dev branch to heroku to ensure production still works as expected
  • again, we should be protected due to the no-ops in react-hot-reload/patch
• clean up app.js and webpack.config.js
  • app.js can be refactored out into helpers
  • webpack.config and webpack.devserver have duplicate configs (hot: true being an example)
• revert .babelrc edits in favor of just adding a webpack loader, per the below note on the react-hot-loader README:
  • Update: doesn't work as mentioned in quote below.

Works with or without Babel (you can remove react-hot-loader/babel from .babelrc and instead add react-hot-loader/webpack to loaders)

[vanderhoop]

implemented several weeks back. closing