babel-plugin-hot-export v1.0.0

babel-plugin-hot-export

Babel plugin to wrap default export with react-hot-loader

...
export default thing;

will be transformed to

import { hot } from 'react-hot-loader';
...
export default hot(module)(thing);

This can be useful when multiple "root" react components are rendered in the process of converting a legacy app into react.

A list of absolute paths to such "root" components can be generated by grep or similar tools and stored into a file.

Then you can prepend your exising webpack rules with one that will check if a module is your "root" component and should be hot-exported.

// webpack.dev.config

const reactRenderRoots = fs.readFileSync('./renderReactRoots.txt', 'utf8').split('\n');

module.exports = {
  ...
  module: {
    rules: [
        // Hot Export React Root Components
        {
            test(module) {
                return reactRenderRoots.includes(module);
            },
            use: {
                loader: 'babel-loader',
                options: {
                    babelrc: false,
                    plugins: ['hot-export'],
                },
            },
        },
        ... // all your standard rules
    ],
  }
  ...
};