Question

我是React webpack等的新手，我正在尝试将Hot Module替换为我的工作流程。我正在使用webpack，express，Babel ES6和React，我相信我拥有所需的所有装载程序。

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

order by

index.js（条目）

>Ignored an update to unaccepted module 28 -> 17
>
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.
>
[HMR]  - ./app/scripts/libs/index.js

index.js（章节组件）

import React from 'react';
import ReactDOM from 'react-dom';
import style from 'css/main.css';
import Sections from 'components/Sections/index.js';


ReactDOM.render(
    <div>
        <h2>Hek</h2> 
        <Sections></Sections>
    </div>, 

    document.getElementById('app')
)

console.log('check for me');

BuildScript.js ＆＃39;使用严格的＆＃39;;

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;

Webpack.config.js

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!');
});

已安装NPM软件包

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()
    ]
  };

热门模块更换与Webpack，Express＆amp; Babel（babel-loader）不使用React组件（错误：忽略对未接受模块的更新）

0 个答案: