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

0 回答 0