Webpack focus 1.0.0

Breaking changes :

• Due to use of babel-preset-focus, NODE_ENV should be at development, production or test
• Due to use of babel-preset-focus, if you are using lodash 3.10.1, you may need to set LEGACY_LODASH to true
• If your project in not in ES6 (import and export only), you can go in legacy mode by setting LEGACY_EXPORTS to true
• If you are using the focus-devtools in your project, make sure the render is conditionnal in your layout (__DEV__ && <DevTools/>)

Features :

• Adding error-overlay in dev server
• Now hot reload can be used (project must be in ES6, see below)
• If the env variable ANALYZE is set, you will be able to see what's in your build file (useful, to check for unused dependency, etc or understand the js file size)
• CSS hot reload is now functioning
• You can disable babel-polyfill by setting USE_POLYFILL to false (polyfill is added automatically to your application)
• A configuration for Typescript has been done
• Output files are now sorted between fonts, img and chunks folder
• if DEV is not set, null-loader is used to remove focus-devtools
• Updating dependencies
• Adding polyfill for fetch (browser only)
• USE_CACHE option to accelerate build (default to true)
• PARALLEL_BUILD option to further accelerate build (default to false)

HOW TO - Hot reload:

The only thing to do to enable the hot reload is

• to set HOT_RELOAD env variable to true
• to modify your application like in the link (Step 3, 3c), without the need for import 'react-hot-loader/patch';

http://gaearon.github.io/react-hot-loader/getstarted/#step-3-of-3-adding-react-hot-loader-to-preserve-component-state

import React from 'react';
import ReactDom from 'react-dom';
import { AppContainer } from 'react-hot-loader';

import RootContainer from './containers/rootContainer';

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  );
}

render(RootContainer);

if (module.hot) {
  module.hot.accept('./containers/rootContainer', () => { render(RootContainer) });
}