React-hot-loader не работает с React-router-dom

Благодаря этот учебник я нашел способ адаптировать свой проект и заставить работать горячую загрузку. Это даже сделало мой код немного чище, а скрипты сборки - проще.

Webpack.common.js

Первое, что мне нужно было поменять, - это babel-loader. Я украл его из какого-то учебника, и он сработал, но я точно не знал, что он делает, поэтому я избавился от этого кода. Я также сделал компиляцию моего кода быстрее с помощью webpack.DllReferencePlugin.

Вот обновленный webpack.common.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      './src/index.js',
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          plugins: ['react-hot-loader/babel'],
          cacheDirectory: true,
          presets: ['env', 'react'],
        },
      }
    ],
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('../dist/vendor-manifest.json'),
    }),
    new HtmlWebpackPlugin({
      title: '<my-app-name>',
      filename: 'index.html',
      template: './public/index.html',
    }),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, '../dist/*.dll.js'),
      includeSourcemap: false // add this parameter
    })
  ],
};

AddAssetHtmlPlugin требуется, поскольку index.html создается динамически (HtmlWebpackPlugin) для сервера разработки, и вы не можете жестко запрограммировать правильный импорт пакета для vendor.dll и app.bundle (подробнее здесь).

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true // Allow refreshing of the page
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Enable hot reloading
  ]
});

Что я изменил:

1. Я перенес точку входа на webpack.common.

2. Я удалил 'react-hot-loader/patch' из entry

3. (по желанию) Я добавил несколько параметров конфигурации для webpack-dev-server.

Index.js

Это файл, из-за которого произошел сбой горячей перезагрузки. В частности, часть if (module.hot) вызвала его отказ. Поэтому я изменил его на следующее:

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

import { App } from './app';

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

render(App);

if (module.hot) {
  module.hot.accept('./app', () => {
    const NextApp = require('./app').default; // Get the updated code
    render(NextApp);
  });
}

Причина, по которой это работает сейчас, заключается в том, что теперь я загружаю новое приложение и заменяю старое, тем самым сообщая горячему загрузчику, что произошли изменения. Я также мог бы просто использовать module.hot.accept(), но это сделало бы react-hot-loader бесполезным (вы используете горячий перезагрузчик webpack), и таким образом я также терял бы состояние в моих компонентах каждый раз, когда я обновлял какой-либо код.

Итак, поехали. Я надеюсь, что это поможет кому-нибудь (кроме меня).