热模块更换&x27；行不通 if（真）{ //当样式更改时，更新标记 如果（！content.locals）{ module.hot.accept（“../node\u modules/css loader/index.js？modules！。/src/components/ex.css”“../node\u modules/css loader/index.js？modules！。/src/components/ex.css”，function（）{ var newContent=uuuuu webpack_uurequire_uuuuu（../node_modules/css loader/index.js？modules！。/src/components/ex.css”）； if（typeof newContent==='string'）newContent=[[module.i，newContent'，”]； 更新（新内容）； }); }

上面是我的bundle.js文件

正如您所看到的，我的css组件作为accept函数的第一个参数被调用了两次，我认为这导致了问题，但我不知道为什么会调用两次。我还附加了配置文件和index.js

顺便说一下，我还想知道如何使用module.hot.accept函数

它在没有参数的情况下工作得很好，但是如果有任何参数，它都会停止工作

正如我昨天阅读的文档中所述，参数是文档中所说的“依赖项”，但答案过于模糊和简单

我要求你们解释一下这个热接受函数是如何工作的，我应该使用哪些参数，以及我不应该做的事情

if(true) {
        // When the styles change, update the <style> tags
        if(!content.locals) {
          module.hot.accept("../node_modules/css-loader/index.js?modules!./src/components/ex.css""../node_modules/css-loader/index.js?modules!./src/components/ex.css", function() {
            var newContent = __webpack_require__("../node_modules/css-loader/index.js?modules!./src/components/ex.css");
            if(typeof newContent === 'string') newContent = [[module.i, newContent, '']];
            update(newContent);
          });
        }

从“React”导入React；
从“react dom”导入react dom；
从“./components/App”导入应用程序；
从“react hot loader”导入{AppContainer}；
const rootElement=document.getElementById（'root'）；
常量渲染=（组件）=>{
ReactDOM.render(
，根元素
);
};
渲染（应用程序）；
如果（模块热）{
module.hot.accept（（）=>{
渲染（应用程序）；
});
}
var path=require（'path'）；
var webpack=require（'webpack'）；
module.exports={
条目：[
“反应热加载程序/修补程序”，
'网页包开发服务器/客户端？http://localhost:8080',
“webpack/hot/only dev server”，
“./src/components/ex.css”，
“./src/index.js”
],
输出：{
路径：_dirname+'/public'，
文件名：“bundle.js”，
公共路径：'/'
},
开发服务器：{
是的，
热：是的，
contentBase:uu dirname+'/public'，
历史上的倒退：是的，
watchContentBase：是的，
公共路径：'/'
},
决心：{
扩展：['.js'、'.css'、'.json']，
},
devtool:“内联源映射”，
模块：{
规则：[
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
排除：/node_模块/，
查询：{
cacheDirectory:true，
预设：['es2015'，'react']
}
},
{
测试：/\.css$/,，
加载程序：['style-loader'，'css-loader？模块']
}
]
},
插件：[
新建webpack.HotModuleReplacementPlugin（），
//全局启用HMR
新的webpack.NamedModulesPlugin（），
//在HMR更新时，在浏览器控制台中打印更可读的模块名称
],
};

我解决了这个问题。原因是.babelrc文件。我没有像文档中所说的那样将其放入我的src文件夹中。。。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './components/App';
    import { AppContainer } from 'react-hot-loader';

    const rootElement = document.getElementById('root');

    const render = (Component) => {
      ReactDOM.render(
        <AppContainer>
          <Component/>
        </AppContainer>, rootElement
      );
    };

    render(App);

      if (module.hot) {
        module.hot.accept(() => {
          render(App);
        });
      }

    var path = require('path');
    var webpack = require('webpack');

    module.exports = {
        entry:  [
        'react-hot-loader/patch',

        'webpack-dev-server/client?http://localhost:8080',

        'webpack/hot/only-dev-server',

        './src/components/ex.css',

        './src/index.js'
      ],
        output: {
            path: __dirname + '/public',
            filename: 'bundle.js',
            publicPath: '/'
        },

        devServer: {
            inline: true,
            hot: true,
            contentBase: __dirname + '/public',
            historyApiFallback: true,
            watchContentBase: true,
            publicPath: '/'
        },

        resolve: {
          extensions: ['.js', '.css', '.json'],
        },

        devtool: 'inline-source-map',

        module: {
                rules: [
                    {
                        test: /\.js$/,
                        loader: 'babel-loader',
                        exclude: /node_modules/,
                        query: {
                            cacheDirectory: true,
                            presets: ['es2015', 'react']
                        }
                    },
                    {
                      test: /\.css$/,
                      loader: ['style-loader', 'css-loader?modules']
                    }
                ]
            },
        plugins: [
           new webpack.HotModuleReplacementPlugin(),
           // enable HMR globally

           new webpack.NamedModulesPlugin(),
           // prints more readable module names in the browser console on HMR updates
         ],
    };