Webpack react-hot-loader, компилить без перезагрузки?

Question

[steemy_web]

Добрый день! Подскажите пожалуйста, что нужно еще сделать, что бы отображалось без перезагрузки страницы, когда делаю любое изменение файла react компонента или css идет перезагрузка каждый раз страницы.

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 (документация)

1. Убрать или выключить ExtractTextPlugin для dev-конфигурации.
   
2. Добавить опцию hot:true для devServer.
   
3. Добавить корректный publicPath для output и devServer.
   
4. Проверить конфигурацию react-hot-loader для точки входа под React.
   

Comments

[steemy_web]

Спасибо, оказывается hot:true только нужен был, даже убирать ExtractTextPlugin не пришлось, если его уберу, то файлы stylus не компилятся, а они тоже через css-hot-loader обновляются без компиляции

[steemy_web]

Еще появился один вопрос, подскажите пожалуйста, делаю через import Header from './header/Header' и вывожу в основном коде, дак вот, при изменении в header не компилит автоматом, а перезагружает страницу, а в основном, при изменении, компилит на лету, без перезагрузки, с чем может быть связано?

[Александр Мастеров]

steemy_web: Основной — это точка входа, entry point?
Нужно взглянуть на лог консоли и, желательно, на код обоих файлов.
Пока советую создать root-компонтент, указать его в module.hot.accept, и подключать модули в нем.

[steemy_web]

У меня сделано вот так

пример 1

import React, {Component} from 'react';
import {render} from 'react-dom';
import { AppContainer } from "react-hot-loader";

import App from './component/app/App';
 
render(<AppContainer><App /></AppContainer>, document.getElementById("root"))

if(module.hot){
   module.hot.accept(
      './component/app/App',
      ()=>{
         render(<AppContainer><App /></AppContainer>, document.getElementById("root"))
      }
   )
}

а дальше уже все компоненты подключаются в App.

а если сделать так

пример 2

import App from './component/app/App';
const Ind = props => {
   return (
      <div>
         <App />
         <footer>asd</footer>
      </div>
   )
}
 
render(<AppContainer><Ind /></AppContainer>, document.getElementById("root"))

if(module.hot){
   module.hot.accept(
      ()=>{
         render(<AppContainer><Ind /></AppContainer>, document.getElementById("root"))
      }
   )
}

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

[Александр Мастеров]

steemy_web: По умолчанию, в консоле все изменения с hot reload сопровождаются логом. Как там это объясняется?
Указанный в вопросе конфиг Вебпака всё еще актуален или изменился?
Также будет полезно добавить плагин NoEmitOnErrorsPlugin.

[steemy_web]

Доходит до сюда

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...

а потом перезагружает вкладку, а в обычном где работает без перезагрузки, еще есть ошибка

Uncaught RangeError: Maximum call stack size exceeded
    at hotAddUpdateChunk bootstrap 0299b83…:888

[steemy_web]

Спасибо огромное, разобрался, поискал ошибку, надо было убрать плагин new webpack.HotModuleReplacementPlugin(), и все стало норм, стек походу грузило.

[Александр Мастеров]

steemy_web: уже сам хотел написать об этом :)
У меня hot reload сейчас сделан для Express/Koa (с помощью middleware), поскольку это гибче и стек имеет больше кейсов. Но в прошлом использовал devServer. Вроде в этом месте всё сделали правильно.

[steemy_web]

Александр Мастеров: спасибо еще раз, сам не давно начал изучать, вот разобрался хоть.