Webpackホットモジュール交換は、設定後もまだ完全リフレッシュが必要です

Question

ウェブパックホットモジュール交換が動作しました。一度それが働いていると、私はもはや私のコードのための完全なリフレッシュを行う必要はないと言われました。これはそうではありません！私は自分のコードを変更するときにまだリフレッシュが必要です！ （App.js）。

webpack HMRを正しく有効にするにはどうすればよいですか？

const webpack = require("webpack"); 
const path = require("path"); 
const CleanWebpackPlugin = require("clean-webpack-plugin"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: [ 
    "./app/index" 
    ], 
    devtool: "inline-source-map", 
    output: { 
    path: path.resolve(__dirname, "dist"), // Note: Physical files are only output by the production build task `npm run build`. 
    publicPath: "/", 
    filename: "bundle.js" 
    }, 
    devServer: { 
    contentBase: path.resolve(__dirname, "dist"), 
    hot: true, 
    port: 3000, 
    open: true, 
    compress: true 
    }, 
    plugins: [ 
    new ExtractTextPlugin({ 
     disable: false, 
     filename: "css/style.css", 
     allChunks: true 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 

    ], 
    module: { 
    rules: [ 
     { test: /\.js$/, 
     exclude: /(node_modules)/, 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['env', 'react'] 
     } 
     } }, 
     // { test: /(\.css)$/, use: ["style-loader", "css-loader"] }, 
     { test: /(\.css)$/, use: ExtractTextPlugin.extract(["css-loader"]) }, 
     { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] }, 
     // for fonts 
     { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ["file-loader"] } 
    ] 
    } 
}; 

Answer 1

あなたが熱いアップデートを得ればあなたは再必要があなたのappに持っているので、それが動作していない理由は、あるそうあなたは自分のオリジナルのアプリを再レンダリングされます。私が反応使用していない

import './styles/index.css'; 
//import App from './components/App'; 
import React from 'react'; 
import { render } from 'react-dom'; 

const rootDOMNode = document.getElementById('app'); 

let App; 
function renderRoot() { 
    App = require('./components/App').default; // we have to re-require this every time it changes otherwise we are rendering the same old app. 
    render(<App/>, rootDOMNode); 
} 
renderRoot(); 

if (module.hot) { 
    module.hot.accept('./components/App',() => { 
    console.log('Accepting the updated module'); 
    renderRoot(); 
    }); 
} 

Answer 2

私はでWebPACKの-devのサーバーでホットリロードを使用する：これは

import './styles/index.css'; 
import App from './components/App'; 
import React from 'react'; 
import { render } from 'react-dom'; 

const rootDOMNode = document.getElementById('app'); 

function renderRoot() { 
    render(<App/>, rootDOMNode); 
} 
renderRoot(); 

if (module.hot) { 
    module.hot.accept('./components/App',() => { 
    console.log('Accepting the updated module'); 
    renderRoot(); 
    }); 
} 

webpack.config.js私のエントリポイントですgithub

にプロジェクトへ

リンクpackage.jsonにスクリプトを追加します。

webpack-dev-server --output-public-path=/dist/ --inline --hot