Question

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

上面是我的bundle.js文件。

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

顺便说一句，我也想知道如何使用module.hot.accept函数。

没有参数很好地工作但是有了任何参数，它就会停止工作。

参数，正如我昨天阅读的文档所述，它们是文档所说的'依赖'，但它的模糊和简单的回答。

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

    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
         ],
    };

热模块更换反应无效

0 个答案: