Javascript 用Webpack、Express和；Babel（Babel loader）不使用React组件（错误：忽略对不可接受模块的更新）

我是新的反应网页等，我正试图实施热模块更换到我的工作流程。我正在使用webpack、express、Babel ES6和React，我相信我拥有所有需要的加载程序

我已经让HMR为我的CSS文件工作，它完美地更新了CSS，但由于某种原因，当我尝试更新React组件时，我遇到以下错误，必须刷新页面才能看到我的更改。我已经挣扎了一整天，所以任何帮助都会得到很大的回报！我得到的错误如下（我的代码如下所示）：

index.js（条目）

Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: [ 'webpack-hot-middleware/client' , './app/scripts/libs/index.js'], //Can also use "main" property
    output: {
        path: path.resolve(__dirname, 'tmp'), //resolves the absolute path 
        filename: '[name].bundle.js', //
        publicPath: '/'
    },
    devtool: 'inline-source-map',
    resolve:{
        alias: {
            components: path.resolve(__dirname, 'app/scripts/components'),
            fonts: path.resolve(__dirname,  'app/scripts/fonts'),
            images: path.resolve(__dirname,  'app/images'),
            sass: path.resolve(__dirname,  'app/styles/sass'),
            css: path.resolve(__dirname,  'app/styles/css')
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //to use the CSS imported - in your index.js file you 
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(jpg|png|svg|gif)$/,
                use:['file-loader']
            },            
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'react']
                }

            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'African Banker Awards 2018',
            template: './app/scripts/libs/template.ejs',
            inject: 'body'
        }), 
        new CleanWebpackPlugin(['tmp']),
        new webpack.HotModuleReplacementPlugin()
        //new UglifyJsPlugin()
    ]
  };

已安装NPM软件包

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "eslint": "^4.10.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "install": "^0.10.1",
    "npm": "^5.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.1.4",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.1",
    "webpack-hot-middleware": "^2.21.0"
  }
}

---

在

webpack.config.js

中，您是否已尝试完成webpack热中间件条目上的请求参数？通常应将

reload

键指定为

true

的值，例如

js条目：['webpack hot middleware/client？reload=true'，'./app/scripts/libs/index.js']，

@TobiahRex-你就是男人！我猜“reload=true”会强制重新加载，现在它工作得很好！我永远不会意识到。非常感谢你！很高兴听到这个消息。您可能已经知道这一点，但情况并非如此：Webpack在大多数字符串描述的条目中使用内联参数。例如，在指定加载器时，您可以使用带有键/值对的选项对象或带有作为查询参数表达的选项的内联字符串。

import React from 'react';
import ReactDOM from 'react-dom';

export class Sections extends React.Component{
    render(){
        return(
            <div>
                <h1>Yo yo yo wahts</h1>
                <p>hlfgdfd</p>
            </div>
        )
    }
}

module.exports = Sections;

var express = require('express'); //get the express module
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

var app = express(); //create a new instance of that class
var config = require('../../../webpack.config.js');
var compiler = webpack(config);


app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.listen(3000, function () {
    // return console.log('Example app listening on port 3000!');
});

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: [ 'webpack-hot-middleware/client' , './app/scripts/libs/index.js'], //Can also use "main" property
    output: {
        path: path.resolve(__dirname, 'tmp'), //resolves the absolute path 
        filename: '[name].bundle.js', //
        publicPath: '/'
    },
    devtool: 'inline-source-map',
    resolve:{
        alias: {
            components: path.resolve(__dirname, 'app/scripts/components'),
            fonts: path.resolve(__dirname,  'app/scripts/fonts'),
            images: path.resolve(__dirname,  'app/images'),
            sass: path.resolve(__dirname,  'app/styles/sass'),
            css: path.resolve(__dirname,  'app/styles/css')
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //to use the CSS imported - in your index.js file you 
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(jpg|png|svg|gif)$/,
                use:['file-loader']
            },            
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'react']
                }

            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'African Banker Awards 2018',
            template: './app/scripts/libs/template.ejs',
            inject: 'body'
        }), 
        new CleanWebpackPlugin(['tmp']),
        new webpack.HotModuleReplacementPlugin()
        //new UglifyJsPlugin()
    ]
  };

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "eslint": "^4.10.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "install": "^0.10.1",
    "npm": "^5.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.1.4",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.1",
    "webpack-hot-middleware": "^2.21.0"
  }
}