A Webpack Loader that automatically inserts react-hot-loader to your App

by React

react-hot-loader-loader

A Webpack Loader that automatically inserts react-hot-loader to your app, without any changes in your app code.

All it takes is a simple regex to indicate where your "App" Components are. This module does nothing if NODE_ENV is set to production.

Usage

  1. Install
npm i react-hot-loader-loader
  1. In your Webpack configuration, add this loader:
{
    test: /\/App\.js$/, // regex to match files to receive react-hot-loader functionality
    loader: require.resolve('react-hot-loader-loader'),
}

This loader must be placed after any ES6 transpiling loader (Babel), to make sure it transforms the code before it.

  1. Add react-hot-loader to your Babel plugins:
{
  "plugins": ["react-hot-loader/babel"]
}

Working project example with HMR, react-hot-loader and error recovery.

The loader is dependent on react-hot-loader v4+, and won't work with earlier versions.

How it works?

react-hot-loader is amazing! It exposes an HOC that does all the heavy lifting. It can wrap any component and will add real time components tweaking functionality while using HMR.

This Webpack loader just make things cleaner and easier, wrapping components with this HOC for you. All that from a Webpack configuration and not from inside Components.

This component:

import React from 'react';

export default class App extends React.Component {
    render() {
        return 'something';
    }
}

Will transform to this (before ES6 transpilation):

import {hot} from 'react-hot-loader';
import React from 'react';

class App extends React.Component {
    render() {
        return 'something';
    }
}
export default hot(module)(App);

See the test for many more examples.

Pros

  • Easier to control through configuration, just decide a convention and then there is no need for any additional code in an app.
  • No need to refactor old code.
  • Allows dynamic control, for example by using a command flag.
  • You can remove the loader on certain Webpack configurations.

GitHub