Webpack react-hot-loader, compile without reload?

Question

webpack

Good afternoon! Please tell me what else needs to be done, what would be displayed without reloading the page, when I make any change to the react file of the component or css, the page is reloaded every time.

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const WebpackNotifierPlugin = require('webpack-notifier');

const config = {
   entry: [
      'react-hot-loader/patch',
      './_f/app.js'
   ],
    
   output: {
      path: __dirname + "/_p",
      filename: "st.js"
   },
    
   devServer: {
      contentBase: "./_p",
      historyApiFallback: true,
      inline: true,
      port: 2000
   },
    
   module: {
      rules: [
         {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: [
               {
                  loader: 'react-hot-loader/webpack'
               },
               {
                  loader: 'babel-loader',
                  options: {
                     presets: [
                        'es2015',
                        'react',
                     ]
                  },
               }
            ]
         },
         {
            test: /\.styl/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
               fallback: 'style-loader',
               use: [
                  {
                     loader: 'css-loader',
                     options: {
                        sourceMap: true,
                        minimize: true
                     }
                  }, 'autoprefixer-loader?browsers=last 2 versions', 'stylus-loader']
            })
         }
      ]
   },

   plugins: [
      new ExtractTextPlugin('st.css'),
      new WebpackNotifierPlugin,
      new webpack.HotModuleReplacementPlugin()
   ],

   devtool: "cheap-inline-module-source-map",
}



if (process.env.NODE_ENV === 'production') {
   config.devtool = false;
   config.plugins = [
      new ExtractTextPlugin('st.css'),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({comments: false}),
      new webpack.DefinePlugin({
         'process.env': {NODE_ENV: JSON.stringify('production')}
      })
   ];
};

module.exports = config;

Answer 1

Hot Module Replacement (documentation)

1. Remove or disable ExtractTextPluginfor dev configuration.
   
2. Add an option hot:truefor devServer.
   
3. Add the correct publicPathone for output and devServer.
   
4. Check react-hot-loader configuration for React entry point.
   

Answer 2

Hello. It seems necessary in the root file of the application (this is the one in which the render method is called ) to add a block of code that triggers a rerender on changes:

// Импорт обертки для регистрации изменений
import { AppContainer } from "react-hot-loader";

// Вызов метода render для первоначального монтажа приложения в DOM
ReactDOM.render( <AppContainer><YourApp/><AppContainer/>, document.getElementById("root"));

// Вызов метода render при регистрации изменений плагином HMR
if(module.hot){
  module.hot.accept(()=>{
    ReactDOM.render(<AppContainer><YourApp/><AppContainer/>, document.getElementById("root"))
  })
}

I also suspect that you can move the string "react-hot-loader/webpack" to the plugins property of the babel-loader, renaming it to "react-hot-loader/babel" .
Should help.