A Webpack Loader that automatically inserts react-hot-loader to your App 👨🔬
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
.
Example:
This example code (A very informative webpack example)
npm i react-hot-loader-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.
{
"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.
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.
MIT